动画SVG圆圈从小到大再回到小

Question

在不使用 css 和 js 的情况下，我想为这个 svg 制作动画。我希望圆圈从小变大，然后再变小。我已经让动画适用于从小到大的大小，但现在我似乎无法弄清楚如何让它们 return 达到原始大小。

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

动画SVG圆圈从小到大再回到小

Animate SVG circle from small to large and back to small

svg

svg-animate