javascript-使用Snap.svg在z空间中移动SVG组

我正在使用Snap.svg使SVG的元素互动.

如何在其他所有形状的“前端”中移动一个Element.group形状组？悬停时将执行此操作.

一个简单的JSFiddle示例：

http://jsfiddle.net/offmilk/b0av7jx6/

当它们悬停在上方时,我试图使后面的两个圆圈位于前面.

我知道Raphaël以Element.toFront()的形式对单个元素具有类似的功能.两者的创建者都回答了类似的问题here,但是我无法将其解决方案添加到我的悬停设置中.

在此先感谢您的帮助！

解决方法:

我认为这取决于您是否介意更改实际的SVG,或者是否需要将SVG保持原样(在这种情况下,您将需要CSS).

正如您提到toFront()一样,我假设可以更改SVG.

在这种情况下,您需要做的只是将元素再次添加到paper / svg中,它将放到最前面.

所以你可以写
    s.append(element)
要么
    this.paper.append(element)
如果您希望此功能适用于任何纸张.

在此示例中,我将使用可重复使用的悬停功能将其编写如下：

function hoverOverFront() {
    this.paper.append( this );
    this.attr({ fill: 'green' });
}

function hoverOut() { 
    this.attr({ fill: 'black' });
};

back.hover( hoverOverFront, hoverOut ); 
front.hover( hoverOverFront, hoverOut );

jsfiddle

标签：snap-svg,svg,raphael,html,javascript
来源： https://codeday.me/bug/20191121/2050825.html