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

Chrome reloading embedded SVG object when hiding and showing parent DIV container

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

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

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

这里是 link 到有问题的页面:Link

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

下面是一个测试用法示例: changeBladeColor(1, '#ff0000');

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