重新启动背景SVG动画

我有一个SVG设定为元件的背景图像。元素第一次显示时，动画播放正确。重新启动背景SVG动画

在后续的显示器（例如，如果该元素的副本被通过JavaScript注入，或如果背景图像被移除并且添加回用CSS/JavaScript的），动画不从头开始。我认为这是预期的功能，因为该图像不被浏览器重新加载 - 它使用已经具有动画效果的内存版本。

这里就是一个演示（不是我）： http://www.luigifab.info/public/svg-smil/test.html

有用于Firefox和Chrome一些相关的浏览器的bug报告，但正如上面我觉得这是预期的功能。

有每当显示的图像没有办法让我的SVG动画重置/重播？

我非常期待使用CSS只和SVG的解决方案 - 别人用JavaScript的解决方案，如果这是不可能的。

来源

2013-10-04 Alasdair McLeay

你的SVG图像无法显示正确的.. ？这是问题呃..？ –

SVGs正在显示，他们只是没有动画在随后的显示。如果你点击上面的演示链接，然后点击'显示'，你会看到SVG动画。点击“隐藏”，然后再次“显示”，SVG不会动画。 –

你能告诉我你的Animate代码吗？ –

一种可能性是改变图像的URL强制浏览器重新加载。

来源

2013-11-11 17:35:54 luigifab

每当有人访问该页面时都要更改它！？ –

是的，这不是一个好主意（针对网络使用），但它起作用。 – luigifab

我觉得你的猜测“......作为图像不被认为已被重新加载浏览器 - 它使用在已经存储的动画版”是正确的，因为SVG文件缓存！所以没有（真正的）“重新加载”，动画不会被触发（再次）。

嗯，首先让我们来看看SVG动画。还有，你可以被用来重复动画的动画元素中使用两个属性 - 见Repeating Animations和The ‘animate’ element。在你的情况下，动画只运行一次（不重复）。

所以你需要使用Javascript以某种方式“触发”的动画。
这是可能的原则（例如：Advanced SVG Animation Techniques），但前提是SVG文件是DOM，您可以通过JavaScript访问的一部分。因此，您必须将该SVG文件包含为<object>。

只要在<img>标记中使用SVG文件，或者作为CSS background-image，就没有脚本访问该文件的权限。

所以，我能想到的，以实现自己的目标的唯一途径是防止浏览器缓存SVG文件（见How (and how not) to Control Caches），或使用SVG文件中的一个<object>元素，这样就可以控制通过Javascript动画。

BTW：luigifab的答案是没有那么糟糕。这是一个经常使用的“技巧”来强制重新加载文件/图像 - 请参阅The Cache Trick

来源

2014-01-28 00:55:39 Netsurfer

luigifab的答案的实现。将一些random things放在url参数的末尾，这会强制浏览器认为资源是“新资源”。 Demo

来源

2014-01-30 16:23:00 AzDesign

在URL中使用缓存清除的随机密钥。尽管您的示例没有长动画来正确测试它，但我已添加重复的加载图像以使差异显而易见。

url + "&" + Math.random()

没有重装演示恒定URL：http://jsfiddle.net/4ZBLr/8/

刷新演示用随机URL SRC：http://jsfiddle.net/4ZBLr/9/

来源

2014-01-31 12:43:34 DhruvPathak

正如@netsurfer说，我通过使用object解决了这个问题。这里有一个例子：

<object type="image/svg+xml" data="my.svg"></object>

我每次动态注入动画从头开始的SVG object。

来源

2017-05-26 00:47:34 IvanRF

这对我来说很有魅力 – hugostacks

我认为在很多情况下setCurrentTime(0)是最好的解决方案 - 如果浏览器支持。下面是一个例子（假设你使用<object>标签嵌入，当然）：

let content = document.getElementById("object-id").contentDocument; 
let svg = content.getElementsByTagName("svg")[0]; 
if(svg.getCurrentTime() > 10) 
    svg.setCurrentTime(0);

更多相关API的相关信息可以在这里找到： https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement

来源

2017-05-28 10:09:55

重新启动背景SVG动画

回答

相关问题