Chrome在隐藏和显示父DIV容器时重新加载嵌入的SVG对象

时间:2015-01-05 14:36:55

标签: javascript css google-chrome dom svg

我正在使用Adobe Edge Animate做一些CSS3动画,并使用一个插件将SVG图像转换为标签,以便可以通过Javascript访问SVG元素。问题是,当其中一个父DIV容器被隐藏并稍后重新显示时,嵌入的SVG图像将被重新加载而不会对其进行任何更改,例如形状的填充颜色等。

当加载新图像时,这也会导致动画中出现一些卡顿现象,因为重新加载图像需要花费很少的时间。

Firefox或IE中不存在此问题。有没有办法告诉chrome在隐藏和显示时不重新加载嵌入的图像?

以下是相关网页的链接:Link

如果按Enter键,则会触发部分动画。您可以在旋转后看到它切换图像并闪烁。如果您通过名为changeBladeColor()的浏览器控制台使用内置函数,则可以看到它如何重置任何已更改的属性。此功能可更改SVG中形状的填充颜色。

以下是测试的示例用法: changeBladeColor(1,'#ff0000');

1 个答案:

答案 0 :(得分:1)

似乎唯一的解决方案是将元素放在页面外。我不得不重新做很多动画,所以在做任何需要显示和隐藏对象的项目时(特别是那些可能看起来没有这样做的项目),请记住这一点。