Animiere SVG-Kreis von klein zu groß und zurück zu klein

Question

Ohne Verwendung von CSS und Js, möchte ich diese SVG animieren. Ich möchte, dass die Kreise von klein zu groß und dann wieder zu klein werden. Ich habe die Animation für klein bis groß arbeiten lassen, aber jetzt kann ich nicht herausfinden, wie ich sie zu ihrer ursprünglichen Größe bringen kann.

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

auf dem ersten Kreis Fokussierung, würde ich r="1"-r="6" gehen und dann zurück zu r="1". Dies sollte innerhalb dur="1s" geschehen.

Ist das möglich? Wenn das so ist, wie? Nochmals, ohne Verwendung von externem JS oder CSS.

Danke!

Answer 1

Verwenden Sie anstelle von from und tovalues, um eine Reihe von Werten aufzulisten, zwischen denen animiert werden soll.

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