將動畫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>