Html 旋转a<；内的SVG元素；使用>；节点

我定义了一个SVG元素

<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>

这没什么用

---

我知道我的动画是有效的，因为我可以将它应用于

svg

，整个过程都会旋转，但我只想让手旋转。我该怎么做？

这是因为当浏览器完成对css文件的解析并尝试将样式应用于每个声明的选择器时，它看不到类名为

clock\u hour

的

元素，因为它位于必须加载的不同文件中，并且发生在解析并应用css文件之后，这就是为什么你看不到动画在

class\u hour

上运行的原因。如果复制

clock.svg

中的标记并将其插入另一个

svg

页面中，它将正确应用动画

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