具有计时功能的SVG动画在Firefox中不起作用

时间:2017-03-24 02:00:33

标签: animation svg

适用于Chrome / Safari。

<svg height="50" viewBox="0 0 16 10">
  <rect class="background" width="16" height="10"></rect>
  <rect class="vertical" width="2" x="5">
    <animate calcMode="spline" keyTimes="0;0.22;0.33;0.55;0.66;0.88;1" keySplines="0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1" attributeName="height" from="0" to="10" dur="0.5s" begin="1.3s" fill="freeze"></animate>
  </rect>
  <rect class="horizontal" height="2" y="4">
     <animate calcMode="spline" keyTimes="0;0.22;0.33;0.55;0.66;0.88;1" keySplines="0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1" attributeName="width" from="0" to="16" dur="0.5s" begin="0.8s" fill="freeze"></animate>
  </rect>
</svg>

如果我删除了calcModekeyTimeskeySplines属性,它也会在Firefox中启动。

1 个答案:

答案 0 :(得分:1)

在SVG1.1中(我不了解SVG2),

这时FF正确,其他人应该引发错误而不是动画。

&#13;
&#13;
<svg height="50" viewBox="0 0 16 10">

  <rect class="vertical" width="2" x="5">
    <animate calcMode="spline" values="0;2.2;3.3;5.5;6.6;8.8;10" keyTimes="0;0.22;0.33;0.55;0.66;0.88;1" keySplines="0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1;  0.1 0.8 0.2 1;" attributeName="height" from="0" to="10" dur="0.5s" begin="1.3s" fill="freeze"></animate>
  </rect>
  <rect class="horizontal" height="2" y="4">
     <animate calcMode="spline" keyTimes="0;0.22;0.33;0.55;0.66;0.88;1" values="0;2.2;3.3;5.5;6.6;8.8;10" keySplines="0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1" attributeName="width" from="0" to="16" dur="0.5s" begin="0.8s" fill="freeze"></animate>
  </rect>
</svg>
&#13;
&#13;
&#13;