svg 矩形高度动画

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 矩形高度动画

svg rect height animation

animation

svg

svg-animate