SVG animation working properly in Chrome but not in Firefox -
SVG animation working properly in Chrome but not in Firefox -
the svg animation working in chrome not in firefox. trying start animation 0.4 secs after page loads. here 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>
what doing wrong ?
your syntax wrong begin. seek 0.4s rather .4 , work. syntax here , firefox implements precisely. suggest file bug on chrome it's working incorrectly.
here's testcase corrected...
<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>
google-chrome firefox svg svg-animate
Comments
Post a Comment