CODEWITHSUNDEEP
animationsvgsvg-animate
kimomat
kimomat

Reputation: 2399

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>

Upvotes: 0

Views: 254

Answers (1)

ccprog
ccprog

Reputation: 21811

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>

Upvotes: 1

Related Questions