L'animation SVG fonctionne correctement dans Chrome mais pas dans Firefox

Question

L'animation SVG fonctionne correctement dans Chrome mais pas dans Firefox. J'essaie de démarrer l'animation 0,4 secondes après le chargement de la page. Voici le code

<svg width="300px" height="300px" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"> 
<circle cx="150" cy="150" r="70"> 
     <animate dur="2s" attributeName="r" begin=".4" restart="whenNotActive" calcMode="spline" values="0; 100; 70; 50; 70; 95; 70; 60; 70; 75; 70; 68; 70" keySplines="0 .75 .5 1; .5 0 1 .25; 0 .25 .25 1; .5 0 1 .5; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1" keyTimes="0; 0.2564; 0.5128; 0.6154; 0.6923; 0.7436; 0.7949; 0.8462; 0.8974; 0.9231; 0.9487; 0.9744; 1" fill="freeze"></animate> 
    </circle> 
</svg> 

Qu'est-ce que je fais mal?

Answer 1

Votre syntaxe est incorrecte pour commencer. Essayez 0.4s plutôt que .4 et cela fonctionnera. La syntaxe est here et Firefox l'implémente avec précision. Je vous suggère de signaler un bug sur Chrome qui ne fonctionne pas correctement.

Voici votre testcase corrigé ...

<svg width="300px" height="300px" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"> 
<circle cx="150" cy="150" r="70"> 
     <animate dur="2s" attributeName="r" begin="0.4s" restart="whenNotActive" calcMode="spline" values="0; 100; 70; 50; 70; 95; 70; 60; 70; 75; 70; 68; 70" keySplines="0 .75 .5 1; .5 0 1 .25; 0 .25 .25 1; .5 0 1 .5; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1" keyTimes="0; 0.2564; 0.5128; 0.6154; 0.6923; 0.7436; 0.7949; 0.8462; 0.8974; 0.9231; 0.9487; 0.9744; 1" fill="freeze"></animate> 
    </circle> 
</svg>