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

Sorting animated GIFs in SVG without stopping the animation using D3/JavaScript

本文关键字：动画 GIF 不停止 排序 D3 JavaScript SVG 使用      更新时间：2023-09-26

基于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的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中的图像元素。

--Florian

你可以做一些事情，比如…

<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;
}
相关文章：