svg 虚线 圆 动画所以它旋转

Posted 2023-03-04

【中文标题】svg 虚线 圆 动画所以它旋转

【英文标题】：svg dashed line circle animate so it rotates

【发布时间】：2022-01-18 01:58:23

【问题描述】：

我有一个像这样的 SVG，

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

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

【问题讨论】：

***.com/questions/15138801/…

【参考方案1】：

或者SMIL:

<svg xmlns="http://www.w3.org/2000/svg"  >
    <g fill="none" 
       stroke="#1864ab" stroke- 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"  >
    <g fill="none" stroke="#1864ab" stroke- stroke-dasharray="4" opacity=".4"> 
        <circle cx="565" cy="565" r="565" stroke="none"/>
        <circle cx="565" cy="565" r="564"/>
    </g>
</svg>