SVG-Animation mit Timing-Funktion funktioniert nicht in Firefox

Question

Funktioniert auf 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> 

Wenn ich die calcMode, keyTimes und keySplines entfernen Attribute es beginnt auch in Firefox zu arbeiten.

Answer 1

In SVG1.1 (ich weiß nicht, über SVG2),

• Sie müssen ein values Attribut entlang der keyTimes Attribut haben.

• specs on keySplines sagen, dass:

  da muss man weniger Sätze von Kontrollpunkten sein, als es ‚keyTimes‘.

FF ist dann hier richtig, und andere sollten einen Fehler und nicht animieren erhöhen.

<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>