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

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

本文关键字：加载对象 SVG 新加载显示隐藏 DIV Chrome 更新时间：2023-09-26

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

加载新图像时，这也会导致动画中出现一些卡顿，因为重新加载图像需要少量时间。

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

这是相关页面的链接：链接

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

下面是测试用法的示例：changeBladeColor（1， '#ff0000'）;

似乎唯一的解决方案是将元素放置在页面之外。我不得不重新制作很多动画，所以在执行任何需要显示和隐藏对象的项目（尤其是那些看起来没有这样做的项目）时，请记住这一点。