Geek asks and answers

SVG linear gradient not working in Safari

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

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

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

Just wondering if anyone came across any other fixes or ideas to get this to work.

+8
source share
3 answers

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

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
 <defs>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.6665" y1="149.5" x2="293.333" y2="149.5">
    <stop  offset="0" style="stop-color:#FFF33B"/>
    <stop  offset="0.0595" style="stop-color:#FFE029"/>
    <stop  offset="0.1303" style="stop-color:#FFD218"/>
    <stop  offset="0.2032" style="stop-color:#FEC90F"/>
    <stop  offset="0.2809" style="stop-color:#FDC70C"/>
    <stop  offset="0.6685" style="stop-color:#F3903F"/>
    <stop  offset="0.8876" style="stop-color:#ED683C"/>
    <stop  offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
</defs>
<rect x="5.667" y="5.333" fill="url(#SVGID_1_)" width="287.667" height="288.333"/>
</svg>

It seems that the use of links in is defsrecommended, but not necessarily according to the specification . So this is a bug in Safari.

+24
source

About Alpha: It seems that Safari (7 at the moment) does not apply to the SVG color alpha channel, use the stop opacity attribute. it works great!

<stop stop-color="rgba(x,y,z,0.5)"> //safari does not work
<stop stop-color="rgb(x,y,z)" stop-opacity="0.5"> //ok
+19
source

.

<base href="/"/> . .

If you cannot delete it, perhaps some workaround already exists: found this meaning, but I did not check it.

Refresh

Just removing href violated the child routing of my corner application, the correct workaround is to add a linearGradient with a relative page layout to the id. I wrapped the logic in this way:

get svgFill(): string {
  return 'url(${this.location.path()}#${this.gradientId}) white';
}
+1
source

More articles:


All Articles