帶定時功能的SVG動畫無法在Firefox中工作

適用於Chrome/Safari。帶定時功能的SVG動畫無法在Firefox中工作

<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工作壓力太大。

來源

2017-03-24 Unidan

Firefox是不正確的動畫，你應該提高對WebKit的和Chrome bugtrackers這個bug。 –

在SVG1.1（我不知道SVG2），

您必須沿着keyTimes屬性的values屬性。
specs on keySplines說：

必須有少一個套控制點之外還有「keyTimes」。

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>

來源

2017-03-24 03:12:11 Kaiido

帶定時功能的SVG動畫無法在Firefox中工作

回答

相關問題