带有 SVG 的徽标中的动画半圆

Question

我想在 SVG 中制作这个图形。我可以使用<animate>标签，并且可以使用 javascript 操作 SVG 文档。如果可能的话，我更愿意在 SVG 中完成这一切。

Answer 1

这是一个更简单的例子：

<svg height="200" width="200" viewBox="0 0 144 144">
    <circle cx="72" cy="72" r="49" stroke-width="6" stroke="#F68524" fill="none"/>
    <circle cx="72" cy="72" r="49" 
        stroke-width="6" stroke="#838588" fill="none">
        <animate attributeName="stroke-dasharray" values="154 0;0 154" dur="1s" repeatCount="indefinite"/>
    </circle>
</svg>

用于 的正确值stroke-dasharray基于圆的周长 ，2 * ? * r我们想要它的一半，因此将其除以 2。在计算为大约 154 的示例中。

请参阅jsfiddle。

更新： 非常接近，但不完全相同，如前所述。这是一个也可以为颜色设置动画的版本：

<svg height="200" width="200" viewBox="0 0 144 144">
    <circle cx="72" cy="72" r="49" stroke-width="6" stroke="#F68524" fill="none">
        <animate attributeName="stroke" values="#838588;#F68524" 
                 dur="2s" calcMode="discrete" repeatCount="indefinite"/>
    </circle>
    <circle cx="72" cy="72" r="49" 
        stroke-width="6" stroke="#838588" fill="none">
        <animate attributeName="stroke-dasharray" values="154 0;0 154" 
                 dur="1s" repeatCount="indefinite"/>
        <animate attributeName="stroke" values="#F68524;#838588" 
                 dur="2s" calcMode="discrete" repeatCount="indefinite"/>
    </circle>
</svg>

请参阅jsfiddle。