SVGサークルを小さなものから大きなものにアニメーション化して小さなものに戻す

Question

cssとjsを使用せずに、このSVGをアニメーション化したいと思います。私はサークルが小さいものから大きいものに、そして次に小さいものに戻ることを望んでいます。私はアニメーションを小規模から大規模まで使えるようにしましたが、今は元のサイズに戻す方法を見つけることができません。第一円を中心に

<svg xmlns="http://www.w3.org/2000/svg"> 
    <circle cx="6" cy="8" r="1" style="fill:steelblue;"> 
    <animate attributeType="XML" attributeName="r" from="1" to="6" 
      dur="1s" begin=".25s" repeatCount="indefinite" /> 
    </circle> 
    <circle cx="18" cy="8" r="1" style="fill:red;"> 
    <animate attributeType="XML" attributeName="r" from="1" to="6" 
      dur="1s" begin=".5s" repeatCount="indefinite" /> 
    </circle> 
    <circle cx="30" cy="8" r="1" style="fill:orange;"> 
    <animate attributeType="XML" attributeName="r" from="1" to="6" 
      dur="1s" begin=".75s" repeatCount="indefinite" /> 
    </circle> 
    <circle cx="42" cy="8" r="1" style="fill:green;"> 
    <animate attributeType="XML" attributeName="r" from="1" to="6" 
      dur="1s" begin="1s" repeatCount="indefinite" /> 
    </circle> 
</svg> 

は、私がr="1"からr="6"にしてから戻ってr="1"に行きたいと思います。これはdur="1s"内で発生します。

これは可能ですか？もしそうなら、どのように？もう一度、外部JSまたはCSSを使用せずに。

ありがとうございます！

Answer 1

fromおよびtoの代わりに、valuesを使用して、アニメーション化する一連の値をリストします。

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="6" cy="8" r="1" style="fill:steelblue;"> 
 
    <animate attributeType="XML" attributeName="r" values="1;6;1" 
 
      dur="1s" begin="0.25s" repeatCount="indefinite" /> 
 
    </circle> 
 
    <circle cx="18" cy="8" r="1" style="fill:red;"> 
 
    <animate attributeType="XML" attributeName="r" values="1;6;1" 
 
      dur="1s" begin="0.5s" repeatCount="indefinite" /> 
 
    </circle> 
 
    <circle cx="30" cy="8" r="1" style="fill:orange;"> 
 
    <animate attributeType="XML" attributeName="r" values="1;6;1" 
 
      dur="1s" begin="0.75s" repeatCount="indefinite" /> 
 
    </circle> 
 
    <circle cx="42" cy="8" r="1" style="fill:green;"> 
 
    <animate attributeType="XML" attributeName="r" values="1;6;1" 
 
      dur="1s" begin="1s" repeatCount="indefinite" /> 
 
    </circle> 
 
</svg>