Rotate an SVG element inside a <use> node - html

Question

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?

Answer 1

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