Question

我有以下SVG动画：

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

我的问题是动画从_top到底部而不是从下到上。我试图通过CSS和内联属性 transform 转换我的矩形，添加了 rotate 和 direction 属性以及 keyPoints 。到目前为止，什么都没有。

Answer 1

只需在高度上同时设置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>

Answer 2

您可以使用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>

SVG矩形动画方向从下到上

2 个答案: