SVG线性渐变在Safari浏览器中不起作用。

Question

我有一个包含线性渐变的SVG对象直接嵌入文档中，在Chrome和Firefox中工作正常，但在Safari中没有任何渲染。如果我将SVG作为文件创建并使用Object标签嵌入它，它在Safari中可以正常工作。其他形状和填充功能正常，只是线性渐变无法工作。我想我可以使用Object，但我更喜欢直接嵌入SVG。

我在这里创建了一个演示（在Chrome中有效，在Safari中无效）：http://jsfiddle.net/sjKbN/

我遇到了这个答案，建议将内容类型设置为“application/xhtml+xml”，但这本身似乎会引起其他问题。

只是想知道是否有人遇到过任何其他修复或想法来使其工作。

- Christian

---

渐变功能在 Safari 的夜间 Webkit 构建版本中有效（可通过 http://nightly.webkit.org/ 下载），因此很有可能在未来发布的 Safari 版本中也能正常使用。 - Brian Swift

哦，太棒了，很高兴看到他们解决了这个问题。感谢你的提示！ - Christian

Answer 1

如果您在渐变周围包裹defs标签，则它将在Safari中起作用：

<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>

看起来在规范中鼓励但不强制将引用包裹在defs中根据规范。所以这是Safari中的一个错误。

- methodofaction

---

我希望我能为这个答案提供更多的赞，这太完美了。谢谢！ - Christian

仍然存在使用<base href="/" />的URL问题。 - sebap

Answer 2

关于Alpha: 目前（本文撰写时）Safari浏览器（版本7）貌似不支持SVG颜色的alpha通道，建议使用stop opacity属性。这样可以避免出现问题！

<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

- Sebastien

---

问题中的代码没有使用rgba颜色，因此它不是这个特定问题的答案。 - Robert Longson

朗森先生错了！首先，在搜索线性渐变在Safari中与其他浏览器不同的缺陷时，我首先看到了这篇文章。其次，这个主题涉及到Safari对线性渐变的不同行为。Alpha通道是这个全局主题的一部分：“SVG线性渐变在Safari中不起作用”。 - Sebastien

@Sebastien，非常好的回答。它绝对是有关的，很高兴在这里看到它！谢谢。 - dev4life

太完美了！你救了我的账号 :')). 这是我的代码：{offset: "100%", color: "rgb(130,130,130)", opacity:"0"} 用于数据和 .attr("stop-opacity", function(d) { return d.opacity; }); 当你添加 stop 时。干杯！ - DragonKnight

Answer 3

对我来说，被接受的答案并不是解决方案。

我的问题在于我的索引文件中存在一个<base href="/" />标签。只需将其删除即可解决我的问题。

如果您无法将其删除，则可能已经存在一些解决方法：发现了这个gist，但我没有测试过。

更新

仅删除href会破坏我的angular应用程序的子路由，正确的解决方法是在页面相对位置之前添加linearGradient id。我将逻辑包装在一个像这样的方法中：

get svgFill(): string {
  return `url(${this.location.path()}#${this.gradientId}) white`;
}

- michelepatrassi

---

你可以使用以下代码作为前缀： window.location.pathname例如： url(${window.location.pathname}#${this.gradientId}) white - OfekA

@OfekA 如果有查询参数，那么这将会出错：http://example.com/page.html?arg=val - blahdiblah

Answer 4

答案很简单，所有的id（不仅限于）在所有SVG文件中都需要是唯一的。

- daxtersky

Answer 5

我在制作带有线性渐变的内联SVG时也遇到了一些问题。设计师在<linearGradient的id中放置了一个-。解决方案就是将其删除，非常简单。

<linearGradient id="linear-gradient">
...
<path fill="url(#linear-gradient)" d="..."/>

使用

<linearGradient id="lineargradient">
...
<path fill="url(#lineargradient)" d="..."/>

- select