svg 虚线圆动画所以它旋转答案

【问题标题】：svg dashed line circle animate so it rotatessvg 虚线圆动画所以它旋转
【发布时间】：2022-01-18 01:58:23
【问题描述】：

我有一个像这样的 SVG，

<svg xmlns="http://www.w3.org/2000/svg" width="1130" height="1130">
    <g fill="none" stroke="#1864ab" stroke-width="2" stroke-dasharray="4" opacity=".4"> 
        <circle cx="565" cy="565" r="565" stroke="none"/>
        <circle cx="565" cy="565" r="564"/>
    </g>
</svg>

我想给人的印象是这个圆圈是顺时针旋转的它正在绘制中，但我从未为 svg 的旋转设置动画。

【问题讨论】：

stackoverflow.com/questions/15138801/…

标签： css animation svg css-animations

【解决方案1】：

或者SMIL:

<svg xmlns="http://www.w3.org/2000/svg" width="1130" height="1130">
    <g fill="none" 
       stroke="#1864ab" stroke-width="2" stroke-dasharray="4" opacity=".4"> 
        <circle cx="565" cy="565" r="565" stroke="none"/>
        <circle cx="565" cy="565" r="564"/>
        <animateTransform attributeName="transform"
                          type="rotate"
                          from="360 565 565"
                          to="0 565 565"
                          dur="4.1s"
                          repeatCount="indefinite"/>
    </g>
</svg>

【讨论】：

【解决方案2】：

您可以尝试设置一个animation，其中它从360deg 开始并工作到-360deg 以获得顺时针旋转。请参阅下面的示例。

@keyframes rotation {
    0%{ transform: rotate(360deg); }
    100%{ transform: rotate(-360deg); }
}
svg {
  animation: rotation 5s linear infinite;
}

<svg xmlns="http://www.w3.org/2000/svg" width="1130" height="1130">
    <g fill="none" stroke="#1864ab" stroke-width="2" stroke-dasharray="4" opacity=".4"> 
        <circle cx="565" cy="565" r="565" stroke="none"/>
        <circle cx="565" cy="565" r="564"/>
    </g>
</svg>

【讨论】：