CODEWITHSUNDEEP
csssvg
merqurio
merqurio

Reputation: 941

A CSS animation of a SVG Images 'fill' property not working in Safari

I'm trying to create a CSS animation for the fill color of a specific part of a SVG image. For that I'm using keyframes and an 'id' to link the animation and the SVG rectangle. You can see a working example here:

http://jsbin.com/deyaqo/3/

This works for most of the browsers except Safari (and maybe IE, I don't know). I'm not sure if this is because of my implementation or due to the lack of support from this vendor.

Thanks for your time !

Upvotes: 1

Views: 1013

Answers (1)

Weafs.py
Weafs.py

Reputation: 22992

You could use the animate element instead.

<svg id="logo" x="0" y="0" width="150" viewBox="12.304 3.974 74.952 22.051" enable-background="new 12.304 3.974 74.952 22.051">
  <rect id="laukia"
        x="56.74"
        y="23.094"
        width="17.895"
        height="2.932"
        fill="black" />
  <animate xlink:href="#laukia"
           attributeType="XML"
           attributeName="fill"
           from="red" to="rosybrown"
           values="red; blue; green; teal; saddlebrown; peru; plum; rosybrown"
           repeatCount="indefinite"
           dur="5s" />
</svg>

Upvotes: 1

Related Questions