Chrome에서는 SVG 애니메이션이 제대로 작동하지만 Firefox에서는 제대로 작동하지 않습니다.

Question

SVG 애니메이션은 Chrome에서는 제대로 작동하지만 Firefox에서는 제대로 작동하지 않습니다. 페이지가로드 된 후 0.4 초 후에 애니메이션을 시작하려고합니다. 코드는 다음과 같습니다

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

무엇이 잘못 되었나요?

Answer 1

시작 구문이 잘못되었습니다. .4보다는 0.4를 사용하면 효과가 있습니다. 구문은 here이며 Firefox는이를 정확하게 구현합니다. Chrome에서 잘못 작동하고 있음을 알리는 버그를 제출하는 것이 좋습니다.

여기에 귀하의 테스트 케이스가 해결 될 것 ...

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