javascript - 使用 SVG Logo 中的动画半圆

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>

用于 lines-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 .