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>

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

1 个答案: