Restart background SVG animation

Question

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.

Answer 1

Implementation for luigifab's answer. put some random things at the end of the url parameter, this will force browser to think that the resource is a "new resource". Demo