Chrome 在隐藏和显示父 DIV 容器时重新加载嵌入的 SVG 对象
Chrome reloading embedded SVG object when hiding and showing parent DIV container
我正在使用 Adobe Edge Animate 制作一些 CSS3 动画,并使用一个插件将 SVG 图像转换为标签,以便可以通过 Javascript 访问 SVG 元素。问题是,当父 DIV 容器之一被隐藏并稍后重新显示时,嵌入的 SVG 图像将被重新加载,丢失对其所做的任何更改,例如形状的填充颜色等。
加载新图像时,这也会导致动画出现一些卡顿,因为重新加载图像需要很短的时间。
Firefox 或 IE 中不存在此问题。有什么方法可以告诉 chrome 在隐藏和显示时不要重新加载嵌入的图像?
这里是 link 到有问题的页面:Link
如果按回车键,会触发部分动画。您可以在旋转后看到它关闭图像并闪烁。如果您通过名为 changeBladeColor() 的浏览器控制台使用内置函数,您可以看到它如何重置任何已更改的属性。此函数更改 SVG 中形状的填充颜色。
下面是一个测试用法示例:
changeBladeColor(1, '#ff0000');
看来唯一的解决办法是将元素放置在页面之外。我不得不重做很多动画,所以在做任何需要显示和隐藏对象的项目时请记住这一点(尤其是那些看起来似乎没有这样做的项目)。
我正在使用 Adobe Edge Animate 制作一些 CSS3 动画,并使用一个插件将 SVG 图像转换为标签,以便可以通过 Javascript 访问 SVG 元素。问题是,当父 DIV 容器之一被隐藏并稍后重新显示时,嵌入的 SVG 图像将被重新加载,丢失对其所做的任何更改,例如形状的填充颜色等。
加载新图像时,这也会导致动画出现一些卡顿,因为重新加载图像需要很短的时间。
Firefox 或 IE 中不存在此问题。有什么方法可以告诉 chrome 在隐藏和显示时不要重新加载嵌入的图像?
这里是 link 到有问题的页面:Link
如果按回车键,会触发部分动画。您可以在旋转后看到它关闭图像并闪烁。如果您通过名为 changeBladeColor() 的浏览器控制台使用内置函数,您可以看到它如何重置任何已更改的属性。此函数更改 SVG 中形状的填充颜色。
下面是一个测试用法示例: changeBladeColor(1, '#ff0000');
看来唯一的解决办法是将元素放置在页面之外。我不得不重做很多动画,所以在做任何需要显示和隐藏对象的项目时请记住这一点(尤其是那些看起来似乎没有这样做的项目)。