这行 css 动画的代码不在 safari 上运行答案

【问题标题】：This line of code for css animation dont run on safari这行 css 动画的代码不在 safari 上运行
【发布时间】：2015-12-28 10:02:41
【问题描述】：

.st0 {
  fill: #00A14B;
  stroke: #000000;
  stroke-width: 4;
  stroke-miterlimit: 10;
}
.st1 {
  fill: green;
  -webkit-animation: usage 2s normal forwards;
  animation: usage 2s normal forward;
}
@-webkit-keyframes usage {
  from {
    height: 0;
  }
  to {
    height: 72%;
  }
}
@keyframes usage {
  from {
    height: 0;
  }
  to {
    height: 72%;
  }
}

<svg>
  <g id="stroker">
    <polygon class="st0" points="39.395,10.166 39.395,2.02 25.898,2.02 25.898,10.166 5.404,10.166 5.404,102.403 59.89,102.403 59.89,10.166 " />
    <rect x="25.898" y="2.02" width="13.755" height="9.839" />

  </g>
  <g id="filler">

    <rect x="6.96" y="11.335" class="st1" width="51.374" height="88" />
  </g>
</svg>

我的目标是让电池从上到下充满动画，以指示使用水平。经过多次尝试，我似乎无法让它在 safari 上运行。

基本上我只是想让电池的红色填充变为绿色，这只是为了测试。

【问题讨论】：

标签： css animation svg safari css-animations

【解决方案1】：

我在这里解决它：http://jsfiddle.net/3vpkq899/3/ 似乎需要将@keyframes 中的height 更改为transform: scaleY(100%)

【讨论】：