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

Question

我正在使用 Snap.svg 使我的 SVG 元素具有交互性。

我如何移动 Element.group 我所有其他形状“前面”的形状组？此操作将发生悬停时。

这里有一个简单的 JSFiddle 示例:

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

我试图让后面的两个圆圈悬停在前面。

我知道 Raphaël 以 Element.toFront() 的形式为单个元素提供类似的功能。两者的创建者都回答了一个类似的问题 here ，但我无法将他的解决方案添加到我的 hover 设置中。

预先感谢您的帮助!

Answer 1

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

正如您提到的 toFront()，我假设可以更改 SVG。

在这种情况下，您需要做的就是再次将元素追加到 paper/svg 上，它就会排到前面。

所以你可以写 s.追加(元素) 或者 this.paper.append( 元素 ) 如果您希望它成为适用于任何论文的函数。

在这个例子中，我会像下面这样写一个可重用的悬停函数......

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