Restart background SVG animation
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
I think your guess "... as the image is not considered to have been reloaded by the browser - it uses the in memory version which is already animating" is correct, as the SVG file is cached! So without a (real) 'reload' the animation is not triggered (again).
Well, firstly let's have a look at SVG animations. There are two attributes you can use inside an animation element which are used to repeat the animation - see Repeating Animations and The ‘animate’ element. In your case the animation runs only once (no repetition).
So you would need Javascript to somehow "trigger" the animation.
This is possible in principle (example: Advanced SVG Animation Techniques), but only if the SVG file is part of the DOM, which you can access via Javascript. Therefor you have to include the SVG file as an <object>.
As soon as you use a SVG file in an <img> tag or as a CSS background-image you have no script access to the file.
So the only way I could think of to achieve your goal is to prevent the browser from caching the SVG file (see How (and how not) to Control Caches), or to use the SVG file in an <object> element so that you can control the animation via Javascript.
BTW: luigifab's answer is not that bad. This is an often used "trick" to force reload of a file/ an image - see The Cache Trick