16

我有一个 SVG 对象，其中包含直接嵌入在文档中的线性渐变。它在 Chrome 和 Firefox 中运行良好，但在 Safari 中没有呈现任何内容。如果我将 SVG 创建为文件并使用 Object 标签嵌入它，它在 Safari 中可以正常工作。其他形状和填充都可以，只是线性渐变不起作用。我想我可以使用该对象，但我更喜欢直接嵌入 SVG。

我在这里创建了一个演示（适用于 Chrome，而不是 Safari）：http: //jsfiddle.net/sjKbN/

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

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

4

5 回答 5

31

如果你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中的一个错误。

于 2012-07-03T12:04:39.273 回答
23

关于 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
于 2014-10-06T16:43:56.663 回答
16

接受的答案不是我的解决方案。

我的问题是我的索引文件中存在一个<base href="/" />标签。简单地删除它为我解决了这个问题。

如果您无法删除它，可能已经存在一些解决方法：找到了这个要点，但我没有测试它。

更新

只需删除 href 就破坏了我的 Angular 应用程序的子路由，正确的解决方法是在 linearGradient id 前面加上页面相对位置。我将逻辑包装在这样的方法中：

get svgFill(): string {
  return `url(${this.location.path()}#${this.gradientId}) white`;
}
于 2018-12-02T11:50:33.733 回答
1

答案很简单，所有 SVG 文件的所有 id（不仅是<linear gradient>）都必须是唯一的。

于 2021-07-28T13:38:13.590 回答
0

在制作带有线性渐变的内联 SVG 时，我也遇到了一些麻烦。设计师-在<linearGradient. 解决方案就像删除它一样简单。

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

和

<linearGradient id="lineargradient">
...
<path fill="url(#lineargradient)" d="..."/>
于 2020-12-24T00:22:58.883 回答