Search code examples
animationsvgsvg-animate

SVG SMIL Animation not working in Firefox if linked from defs


I want to rotate multible objects. I am linking the object with the use tag and via href from a defined object inside the defs. In all browsers the rotation animation is working. Only in Firefox (62.0.3 MacOS High Sierra) is the rotation animation not working. I have also tried to use the deprecated xlink:href to link to the object. Same problem here. Any idea or workaround to get this example working in firefox?

And yes, i know, i could animate it through css-animation. But i need it this way because this svg is used as an animated background image.

<svg xmlns="http://www.w3.org/2000/svg" width="166" height="277" viewBox="0 0 166 277">
<defs>
  <rect id="myrect" width="20" height="20" fill="#FF0000">
    <animateTransform 
    	id="mediumstaranimation"
  	    repeatCount="indefinite"
  	    attributeName="transform" type="rotate"
  	    from="0 10 10" to="360 10 10" begin="0" dur="4s" />
 </rect>
</defs>
  <g fill="none" fill-rule="evenodd">
    <use x="68" y="16" href="#myrect" />
    <use x="68" y="66" href="#myrect" />
  </g>
</svg>


Solution

  • That seems to be a bug. Wrap the rect in a group as a workaround.

    <svg xmlns="http://www.w3.org/2000/svg" width="166" height="277" viewBox="0 0 166 277">
    <defs>
      <g id="myrect">
        <rect width="20" height="20" fill="#FF0000">
          <animateTransform
        	id="mediumstaranimation"
      	    repeatCount="indefinite"
      	    attributeName="transform" type="rotate"
      	    from="0 10 10" to="360 10 10" begin="0" dur="4s" />
        </rect>
      </g>
    </defs>
      <g fill="none" fill-rule="evenodd">
        <use x="68" y="16" href="#myrect" />
        <use x="68" y="66" href="#myrect" />
      </g>
    </svg>