悬停时更改SVG组堆栈顺序？

Question

我工作的概念有点证明试验有关堆叠和悬停触发动画：

http://dougstewart.io/demos/experiments/svg-interaction/

东西我还没有弄清楚是怎么每个元素的z-index的转变基于盘旋的盘旋方式（黄色会超过橙色和绿色）。从我收集的这不是一个CSS选项，但也许JS？我必须删除元素并移动它的标记吗？

我听说这是Velocity.js的一个选项，但我没有看到如何。谢谢！

Answer 1

所以看起来没有CSS方法来完成它，它也似乎必须手动管理。我最终加入data-order="#"每个g，然后使用这个JS切换顺序：

$(document).on('mouseenter', '.hero > g', function() { 
    var target = $(this); 
    var parent = $(this).parent(); 

    $(target).remove().appendTo(parent); 

}).on('mouseleave', '.hero > g', function() { 
    var target = $(this); 
    var parent = $(this).parent(); 
    var spot = $(this).attr('data-order'); 

    if (spot >= $(this).parent().children().length) { 
    $(target).remove().appendTo(parent); 

    } else { 
    $(target).remove(); 
    $(parent).children(':nth-child(' + spot + ')').before(target); 
    } 
}); 

我可能以后清理它，但它的伎俩。

Answer 2

SVG的z-indexing版本的一个不幸的功能是它依赖于DOM顺序。树中稍后出现的元素将出现在首先出现的元素之上。

您必须实际重新呈现您的SVG元素以升序以获得所需的分层。