CODEWITHSUNDEEP
google-chromeanimationsvg
morphsd
morphsd

Reputation: 1

SVG animation doesn't work in chrome

This animation works perfectly in Firefox... But not in Chrome. Polygons don't animate? JSFiddle

<polygon fill="url(#grad1)" points="503,275 529,275 529,275 503,275">
    <animate attributeName="points"
         calcMode="linear"
         begin="1s" dur="0.4s"
         from="503,275 529,275 529,275 503,275"
         to="503,275 529,275 843,335 789,335"
         fill="freeze"/>

Any ideas?

Upvotes: 0

Views: 2671

Answers (2)

Michael Mullany
Michael Mullany

Reputation: 31715

Ok let me try again - didn't catch that you were only looking at Polygon. It looks like animate doesn't work directly on a polygon in Chrome, but you can get the same effect by putting a filter on the shape and animating the filter region. It's sort of hacky, but it gets you where you want:

   <filter id="animateClip" x="0%" y="0%" width="100%" height="0%">
         <animate attributeName="height"
         attributeType="XML"
         calcMode="linear"
         dur="1s"
         from="0%"
         to="100%"
         fill="freeze"/>
        <feColorMatrix type="identity"/>
    </filter>

The colormatrix is there just to give a filter result. Chrome doesn't like empty filters.

Upvotes: 0

Scarecrow
Scarecrow

Reputation: 4137

Chrome (upto Version 25.0.1364.152) does not support svg fully.

Some svg feature are not supported in Firefox too. For example animateTransform tag which is the direct child of a svg tag does not animate the svg in Firefox and chrome, Though W3 document says it should animate the svg,

So it will be better to test your svg in opera,

Upvotes: 1

Related Questions