适用于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>
如果我删除calcMode
,keyTimes
和keySplines
属性,它也开始在Firefox中工作。
在 SVG1.1 中(我不知道 SVG2(,
-
keyTimes
属性旁边必须具有values
属性。 -
规格
keySplines
说:控制点
集必须比现有控制点少一组 "关键时代"。
然后 FF 在这里是正确的,其他人应该引发错误而不是动画。
<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>