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

Question

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

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

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

这是指向相关页面的链接:Link

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

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

Answer 1

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