Question

我创建了一个svg条动画，但这个动作看起来不像this，我知道这可以用CSS3动画完成。在这里，我需要纯SVG代码。我怎样才能实现呢？

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">

<rect fill="#fff" width="3" height="100" transform="translate(0) rotate(180 3 50)">
  <animate
      attributeName="height"
      attributeType="XML"
      dur="1s"
      from="30"
      to="100"
      repeatCount="indefinite"/>
</rect>
</svg>

Answer 1

使用values而不是from / to，以便您可以在两个方向上制作动画。即。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">

<rect fill="#fff" width="3" height="100" transform="translate(0) rotate(180 3 50)">
  <animate
      attributeName="height"
      attributeType="XML"
      dur="1s"
      values="30;100;30"
      repeatCount="indefinite"/>
</rect>
</svg>

Demo

svg rect高度动画

1 个答案: