带有 SVG 的徽标中的动画半圆 [英] Animated semicircles in logo with SVG

问题描述

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

I would like to make this graphic in SVG. I can use <animate> tags and I can manipulate the SVG document with javascript. I would prefer to do it all in SVG if possible.

推荐答案

这是一个更简单的例子:

Here's a simpler example:

<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 的示例中.

The proper values to use for the stroke-dasharray are based on the circle's circumference, 2 * π * r, and we want half of that so divide it by 2. In the example that computes to roughly 154.

参见 jsfiddle.

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

Update: Pretty close, but not quite the same, as noted. Here's a version that also animates the colors:

<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.

这篇关于带有 SVG 的徽标中的动画半圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！