1

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

——弗洛里安

4

1 回答 1

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;
}
于 2013-07-03T14:55:54.937 回答