Question

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

并使用<use>

将其插入到我的DOM中

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

我看到元素没有问题。我想要的是独立旋转时针和分针。所以我试过

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

哪个什么都没做。

我知道我的动画是有效的，因为我可以将它应用到svg并且整个事情都会旋转，但我只想让手旋转。我怎么能这样做？

Answer 1

这是因为当浏览器完成解析您的css文件并尝试将样式应用于每个声明的选择器时，它不会看到具有类名<line>的{{1}}元素，因为它位于不同的文件中必须加载，并在解析和应用css文件后发生，这就是为什么你不能看到clock_hour上运行的动画。如果您复制class_hour中的标记并将其插入与其他clock.svg相同的页面中，则会正确应用动画

在<use>节点内旋转SVG元素

1 个答案: