我基于 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 中的图像元素。
--弗洛里安
最佳答案
您可以做一些事情,例如...,而不是插入和删除元素(这既昂贵又容易出错),而只是使它们不可见。
<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;
}
关于javascript - 使用 D3/JavaScript 在不停止动画的情况下对 SVG 中的动画 GIF 进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17443374/