SVG矩形动画方向从下到上。

Question

我有下面这个SVG动画：

演示：https://codepen.io/anon/pen/xNJYGe

HTML代码：

<div class='batteryIcon'>
  <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 668.3 1108.2">
    <rect class="power" x="100" y="150" width="470" height="880">
      <animate attributeName="height" values="0 ; 880" dur="2.5s" />
    </rect>
    <polygon class="st0" points="444.9,80.7 444.9,15.8 231.2,15.8 231.2,80.7 40.3,80.7 40.3,1080.8 629.3,1080.8 629.3,80.7 "/>
  </svg>
</div>

CSS:

.batteryIcon {
  svg {
    width: 50px;
    display: block;
    .st0 {
      fill: none;
      stroke: #adadad;
      stroke-width: 20;
      stroke-miterlimit: 5;
    }
    .power {
      fill: #06B67A;
    }
  }
}

我的问题是动画从顶部到底部，而不是从底部到顶部。我尝试通过CSS和内联属性transform，添加rotate和direction属性以及keyPoints，但目前为止都没有起作用。

- mrks

Answer 1

不要使用 rect 并动画化 height，可以使用 polygon 并动画化 points 属性。

.batteryIcon svg {
  width: 50px;
  display: block;
}
.batteryIcon svg .st0 {
  fill: none;
  stroke: #adadad;
  stroke-width: 20;
  stroke-miterlimit: 5;
}
.batteryIcon svg .power {
  fill: #06B67A;
}

<div class='batteryIcon'>
      <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 668.3 1108.2">
       <!--<rect class="power" x="100" y="150" width="470" height="880">
          <animate attributeName="height" values="0 ; 880" dur="2.5s" />
        </rect>-->
        
        <polygon points="100,1030 570,1030 570,150 100,150">
          <animate attributeName="points" values="100,1030 570,1030 570,1030 100,1030 ; 100,1030 570,1030 570,150 100,150" dur="2.5s" />
        </polygon>
       <polygon class="st0" points="444.9,80.7 444.9,15.8 231.2,15.8 231.2,80.7 40.3,80.7 40.3,1080.8 629.3,1080.8 629.3,80.7 "/>
      </svg>
    </div>

- enxaneta

Answer 2

同时动画化高度和y值。您希望y值最终为150，需要改变880，因此起始值必须为880 + 150。

svg {
  width: 50px;
  display: block;
}
.st0 {
  fill: none;
  stroke: #adadad;
  stroke-width: 20;
  stroke-miterlimit: 5;
}
.power {
  fill: #06B67A;
}

<div class='batteryIcon'>
  <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 668.3 1108.2">
    <rect class="power" x="100" y="150" width="470" height="880">
      <animate attributeName="y" values="1030 ; 150" dur="2.5s" />
      <animate attributeName="height" values="0 ; 880" dur="2.5s" />
    </rect>
    <polygon class="st0" points="444.9,80.7 444.9,15.8 231.2,15.8 231.2,80.7 40.3,80.7 40.3,1080.8 629.3,1080.8 629.3,80.7 "/>
  </svg>
</div>

- Robert Longson