Направление анимации 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;
    }
  }
}

Myпроблема в том, что анимация идет от _top к основанию вместо снизу вверх .Я попытался преобразовать мой прямоугольник с помощью CSS и встроенного атрибута, добавил атрибуты 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>