Menu
I have an SVG set as a background image of an element. The first time the element is displayed, the animation plays correctly.
On subsequent displays (e.g. if a duplicate of the element is injected via JavaScript, or if the background image is removed and added back with CSS/JavaScript), the animation does not start from the beginning. I think this is intended functionality as the image is not considered to have been reloaded by the browser - it uses the in memory version which is already animating.
Here is a demo of this (not mine): http://www.luigifab.info/public/svg-smil/test.html
There are some associated browser bugs reports for Firefox and Chrome, but as above I think this is intended functionality.
Is there any way to get my SVG animation to reset/replay whenever the image is displayed?
I'm ideally looking for a solution using just CSS and SVG - else a solution with JavaScript if this is not possible.
841
Animated SVG as a Background ImageYou can use data URI to use an animated SVG as a background. In this way, you can use all of the background properties — such as background-repeat , background-color , background-size , and so on — to create the animation you need.
One of the most common reasons why the SVG animation doesn't work is the use of <img> tags to add the SVG. The SVG might be visible on the website, but the animation will not start. You can easily fix this by replacing all <img> tags with an <object> tag.
The end attribute defines an end value for the animation that can constrain the active duration. You can use this attribute with the following SVG elements: <animate>
As @netsurfer said, I solved this issue by using an object. Here is an example:
<object type="image/svg+xml" data="my.svg"></object>
Every time I dynamically inject the SVG object the animation starts from the beginning.
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
