SVG Linear gradient doesn't work in Safari

问题:

I've got an SVG object that contains a linear gradient embedded directly in a document. It works fine in Chrome and Firefox, but in Safari nothing is rendered. If I create the SVG as a file and embed it using the Object tag, it works fine in Safari. Other shapes and fills work, it's just linear gradient that doesn't work. I guess I could use the object, but I'd prefer to embed the SVG directly.

I've create a demo here (works in Chrome, not Safari): http://jsfiddle.net/sjKbN/

I came across this answer which suggests setting the content type to application/xhtml+xml, but this in itself seems to cause other problems.

Just wondering if anyone had come across any other fixes or ideas to get this working.

回答1:

Your gradient will work in Safari if you wrap a defs tag around it:

defs is encouraged but not obligatory according to spec. So this is a bug in Safari.

回答2:

About Alpha : It seems that Safari (7 at this moment) does not cover SVG color alpha channel, use stop opacity attribute. it works fine!

 //safari does not work  //ok 

文章来源: SVG Linear gradient doesn't work in Safari