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

【问题标题】：Changing SVG group stack order on hover?悬停时更改SVG组堆栈顺序？
【发布时间】：2017-07-18 04:55:12
【问题描述】：

我正在做一些概念验证，以试验关于在悬停时堆叠和触发动画：

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

我还没有弄清楚的是如何在悬停时移动每个元素组的 z-index（所以黄色会超过橙色和绿色）基于悬停。据我所知，这不是 CSS 的选项，而是 JS 的选项？我是否必须删除元素并将其标记向上移动？

我听说它是 Velocity.js 的一个选项，但我不知道如何。谢谢！

【问题讨论】：

标签： javascript css animation svg

【解决方案1】：

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

您实际上必须按升序重新渲染您的 SVG 元素，以获得您想要的分层。

【讨论】：

【解决方案2】：

所以似乎根本没有 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);
  }
});

我可能稍后会清理它，但它确实有效。

【讨论】：