I have the following CSS class:
&.loading {
background: url(/svg/loading_animated/fff.svg) $actionColor no-repeat center;
}
This loads this SVG image:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block;" width="200" height="200" viewBox="0 0 100 100">
<circle cx="50" cy="50" fill="none" stroke="#fff" stroke-width="15" r="41" stroke-dasharray="193 66">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" dur="1.1s" repeatCount="indefinite"></animateTransform>
</circle>
</svg>
This works fine on desktop, but on iPhone/IOS, the animation does not work. When I navigate straight to the SVG, I do see the animation.
When I embed the SVG into my CSS class, it also animates:
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto; background: none; display: block;' width='200' height='200' viewBox='0 0 100 100'> <circle cx='50' cy='50' fill='none' stroke='white' stroke-width='15' r='41' stroke-dasharray='193 66'><animateTransform attributeName='transform' attributeType='XML' type='rotate' from='0 50 50' to='360 50 50' dur='1.1s' repeatCount='indefinite'></animateTransform></circle></svg>") $actionColor no-repeat center;
That seems to be the solution, but I'd rather have it work with the URL (this fits my code better).
Is there a way to keep the SVG animated on iOS, while using it as a background-image?
