Question

我正在研究一个关于在悬停时堆叠和触发动画的实验的一个小概念验证：

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

我还要弄清楚的是，如何根据悬停在hover上移动每个元素组的z-index（因此黄色会超过橙色和绿色）。从我收集的内容来看，这不是CSS的选择，但可能是JS？我是否必须删除元素并移动它的标记？

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

Answer 1

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

您必须按升序重新渲染SVG元素才能获得所需的分层。

Answer 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);
  }
});

我可能会在以后清理它，但它可以解决问题。

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

2 个答案: