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

我的基于D3的可视化产生了一个包含动画GIF的HTML5 SVG元素。为了简单起见，借此例如：使用D3/JavaScript对SVG中的动画GIF进行排序而不停止使用D3/JavaScript的动画

<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。（Okay，lame wait。）

只要图像元素被移除，IE9就会停止GIF动画，并且在重新插入时不会重新启动或继续它。图像只是卡在第一帧，并保持这种状态。

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

--Florian

来源

2013-07-03 Florian

通过'我叫分拣机'你的意思是使用'.sort（）'与一个自定义函数，或者你实现了别的东西吗？如果你提供一些关于你如何做事的代码，可能会有所帮助。的jsfiddle？ –

为什么很难找到合适的插入位置？移除/插入元素将强制重新布局/重新绘制，而且这可能很昂贵。 –

除了插入和删除元素（这是昂贵且容易出错）只是让他们看不到，你可以做一些如...

<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-03 14:55:54 Duopixel

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

回答

相关问题