I’ve got an svg with animation done using animateTransform element
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="50" cy="50" r="30" fill="red"/>
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
repeatCount="indefinite"
from="100 -25"
to="-100 25"
/>
</g>
</svg>I would like to disable this animation if the user has prefers-reduced-motion turned on
I tried disabling a few properties via css but it didn’t work
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="50" cy="50" r="30" fill="red"/>
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
repeatCount="indefinite"
from="100 -25"
to="-100 25"
/>
</g>
<style>
animateTransform {
display: none;
dur: 0s;
repeatCount: 0;
}
</style>
</svg>