Animation d'un rectangle SVG de bas en haut

Question

J'ai l'animation SVG suivante :

Démonstration : 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;
    }
  }
}

Mon problème est que l'animation va du haut vers le bas au lieu de de bas en haut . J'ai essayé de transformer mon rect par CSS et attribut inline, ajouté faire pivoter y direction et aussi keyPoints . Rien n'a fonctionné jusqu'à présent.

Answer 1

Il suffit d'animer la valeur y en même temps que la hauteur. Vous voulez finir le y à 150 et il doit changer par 880 donc la valeur de départ doit être 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

Au lieu d'utiliser un rect et l'animation de la height vous pouvez utiliser un polygon et animer le points attribut.

.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>