SVG 線性漸變在 Safari 中不起作用

Question

我有一個 SVG 對象，它包含直接嵌入在文檔中的線性漸變。 它在 Chrome 和 Firefox 中運行良好，但在 Safari 中沒有任何渲染。 如果我將 SVG 創建為文件並使用 Object 標簽嵌入它，它在 Safari 中工作正常。 其他形狀和填充有效，只是線性漸變無效。 我想我可以使用該對象，但我更喜歡直接嵌入 SVG。

我在這里創建了一個演示（適用於 Chrome，而不是 Safari）： http : //jsfiddle.net/sjKbN/

我遇到了這個答案，它建議將內容類型設置為application/xhtml+xml ，但這本身似乎會導致其他問題。

只是想知道是否有人遇到過任何其他修復或想法來使其正常工作。

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中的一個錯誤。

Answer 2

關於 Alpha ：似乎 Safari（此時為 7）不覆蓋 SVG 顏色 alpha 通道，使用停止不透明度屬性。 它工作正常！

<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

Answer 3

接受的答案對我來說不是解決方案。

我的問題是我的索引文件中存在<base href="/" />標記。 只需將其刪除即可為我解決問題。

如果您無法刪除它，則可能已經存在一些解決方法：找到了這個要點，但我沒有對其進行測試。

更新

簡單地刪除 href 破壞了我的 angular 應用程序的子路由，正確的解決方法是在 linearGradient id 前面加上頁面相對位置。 我將邏輯包裝在這樣的方法中：

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

Answer 4

答案很簡單，對於所有 SVG 文件，所有 id（不僅是<linear gradient> ）都需要唯一。

Answer 5

我在制作具有線性漸變的內聯 SVG 時也遇到了一些麻煩。 設計者在<linearGradient的 id 中加入了- 。 解決方案就像刪除它一樣簡單。

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

和

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