使用D3/JavaScript对SVG中的动画GIF进行排序，而不停止动画

基于D3的可视化生成一个HTML5 SVG元素，其中包含动画GIF。为简单起见，以以下示例为例：

<svg>
  <image href="animated.gif"></image>
<svg>

鼠标悬停时，我想通过在后面放一个带有渐变的圆圈来突出显示图像，以获得辉光效果。当SVG将元素呈现在彼此的顶部时，输出必须如下所示：

<svg>
  <circle class="gloweffect"></circle>
  <image href="animated.gif"></image>
<svg>

在浪费了两天之后，我放弃了立即用D3的insert在正确的位置插入圆形元素的尝试。它只是不起作用，特别是因为可视化包含了很多其他东西，插入位置很难表达

因此，我使用D3的append在末尾添加圆。然后我调用一个分类器，该分类器从SVG中删除所有元素，对它们进行排序，然后按照正确的顺序重新添加它们：

<svg>
  <image href="animated.gif"></image>
  <circle class="gloweffect"></circle>
<svg>

--> remove everything

<svg>
<svg>

--> sort and reinsert

<svg>
  <circle class="gloweffect"></circle>
  <image href="animated.gif"></image>
<svg>

-->移开一切
-->排序并重新插入

挑战来了：除了。。。等等。。。IE9。（好吧，等等。）

一旦图像元素被移除，IE9就会停止GIF动画，并且在重新插入后不会重新启动或继续。图像只是停留在第一帧并保持不变

所以我的问题是：有没有办法让IE9在重新插入后继续播放动画？我发现了很多关于常规img元素的旧线程，特别是建议在延迟线程中重置图片，但它们似乎都不适用于SVG中的image元素

---

--Florian

不需要插入和删除元素（这既昂贵又容易出错），只需要让它们不可见，您可以做一些事情，例如

<svg>
  <g class="glow">
    <circle class="gloweffect"></circle>
    <image href="animated.gif"></image>
  </g>
<svg>

---

与其插入和删除元素（这既昂贵又容易出错），不如让它们不可见，您可以执行以下操作

<svg>
  <g class="glow">
    <circle class="gloweffect"></circle>
    <image href="animated.gif"></image>
  </g>
<svg>

---

“我调用分拣机”是指将

.sort（）

与自定义函数一起使用，还是实现了其他功能？如果您提供一些与您的工作方式相关的代码，可能会有所帮助。JSFIDLE？为什么很难找到正确的插入位置？删除/插入元素将强制重新绘制/重新绘制，这可能会很昂贵。所谓“我调用排序器”，您的意思是将

.sort（）

与自定义函数一起使用，还是实现了其他功能？如果您提供一些与您的工作方式相关的代码，可能会有所帮助。JSFIDLE？为什么很难找到正确的插入位置？删除/插入元素将强制重新显示/重新绘制，这可能会很昂贵。