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

我有一個SVG對象，它包含直接嵌入文檔中的線性漸變。它在Chrome和Firefox中運行良好，但在Safari中不顯示任何內容。如果我將SVG創建爲文件並使用Object標記嵌入它，則它在Safari中可以正常工作。其他形狀和填充的工作，它只是線性漸變，不起作用。我想我可以使用該對象，但我寧願直接嵌入SVG。SVG線性漸變在Safari中不起作用

我已經在這裏建立一個演示（工作在Chrome，Safari瀏覽器沒有）：http://jsfiddle.net/sjKbN/

我碰到this answer這表明內容類型設置爲application/xhtml+xml來了，但是這本身似乎會導致其他問題。

只是想知道是否有人遇到任何其他修復或想法，以使其工作。

來源

2012-07-03 Christian Varga

該漸變適用於Safari瀏覽器的夜間webkit構建版本（可下載http://nightly.webkit.org/），因此很有可能它將在未來發布的Safari版本中發揮作用。 –

啊，這真棒，很高興看到他們已經修復它。歡呼的小費！ –

你梯度將在Safari工作，如果你換一個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>

看來，包裹在defs你的介紹人是鼓勵但不強制according to spec。所以這是Safari中的一個錯誤。

來源

2012-07-03 12:04:39 Duopixel

我希望我能給這個答案更多upvotes，這是完美的。謝謝！ –

在你的幫助下我至少可以做到！ http://stackoverflow.com/a/10808645/524555 – Duopixel

關於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-06 16:43:56 Sebastien

問題中的代碼不使用rgba顏色，所以它不是這個特定問題的答案。 –

錯誤的Longson先生！首先搜索線性漸變上的缺陷，在safari中與其他瀏覽器不同，我首先看到了這篇文章。其次，該話題與線性梯度的safari不同行爲有關。 Alpha通道是這個全球主題的一部分：「SVG線性漸變不適用於Safari」 – Sebastien

@Sebastien，很好的答案。它在這裏絕對是相關的！謝謝 – user2070775

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

回答

相關問題