CODEWITHSUNDEEP
htmlcsssvg
J Doe.
J Doe.

Reputation: 349

Rotate an SVG element inside a <use> node

I define an SVG element as such

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
     <symbol id="clock" viewBox="0 0 30 30">
        <circle class="clock_base" fill="none" stroke="black" stroke-width="3" ......></circle>
         <line class="clock_hour" .....</line> 
         <line class="clock_minute" .....</line>
     </symbol>
  </defs>
</svg>

And it is inserted in my DOM with <use>

<svg width="100%" viewBox="0 0 30 30"><use xlink:href="clock.svg#clock"></use></svg>

I see the element so no problem there. What I wanted was to rotate the hour and minute hands independently. So I tried

.clock_hour {
   animation: spin 2s infinite linear;
}

Which does nothing.

I know my animation works because I can apply it to the svg and the whole thing spins, but I just want the hands to spin. How can I do this?

Upvotes: 1

Views: 148

Answers (1)

Trash Can
Trash Can

Reputation: 6814

It is because when the browser finishes parsing your css file and try to apply styles to each declared selector, it does not see a <line> element with class name clock_hour because it is in a different file that has to be loaded, and it happens after the css file was parsed and applied, so that is why you don't see the animation running on class_hour. If you copy the markup in your clock.svg and insert it in the same page as the other svg, it will apply the animation correctly

Upvotes: 1

Related Questions