javascript - 使用 D3/JavaScript 在不停止动画的情况下对 SVG 中的动画 GIF 进行排序

Question

我基于 D3 的可视化生成一个 HTML5 SVG 元素，其中包含动画 GIF。为了简单起见，举个例子:

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

鼠标悬停时，我想通过在后面放置一个带有渐变渐变的圆圈来突出显示图像，以实现发光效果。由于 SVG 将元素渲染在彼此之上，因此输出必须如下所示:

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

浪费了两天时间后，我放弃了尝试使用D3的插入立即将圆形元素插入到正确的位置。它只是不起作用，尤其是。因为可视化包含很多其他内容，并且插入位置很难表达。

因此，我使用 D3 的追加在末尾添加圆圈。然后我调用一个排序器，它从 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 中的图像元素。

--弗洛里安

Answer 1

您可以做一些事情，例如...，而不是插入和删除元素(这既昂贵又容易出错)，而只是使它们不可见。

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

然后在你的 CSS 中:

g.glow .gloweffect {
  opacity: 0;
}

g.glow:hover .gloweffect {
  opacity: 1;
}