的Safari 6 SVG標籤使用問題的

鏈接：http://jsfiddle.net/xkpeD/的Safari 6 SVG標籤使用問題的

或只是

<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <circle cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/> 
    <use xlink:href="#:example" x="20" y="20"/> 
    <defs> 
    <circle id=":example" cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/> 
    </defs> 
</svg>

它會顯示在所有瀏覽器（IE9，Chrome瀏覽器，火狐，Safari 5.1）確定，但在新的Safari 6中僅1圈被渲染。似乎所有<使用>標記不會在Safari 6中呈現。

請幫忙嗎？

來源

2012-10-02 Vasily Shakhov

您是否試過在元素之前放置部分？ –

是的。它沒有幫助。 –

查看最新評論：http://stackoverflow.com/questions/11514248/svg-use-elements-in-chrome-not-displayed?rq=1。如果他們還沒有解決這個問題，你可以嘗試用代替作爲一個快速的解決方法。 – skozin

sam.kozin的回答爲我工作。只是爲了讓這個答案實際上具有可見性。

更換<使用.../>與<使用... > < /使用>

所以：

<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <circle cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/> 
    <use xlink:href="#:example" x="20" y="20"></use> 
    <defs> 
    <circle id=":example" cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/> 
    </defs> 
</svg>

來源

2013-05-30 17:31:55

檢查您是否使用正確的http內容類型標題並將您的文檔作爲有效的XML提供。更多的信息在這個類似的question。

來源

2012-10-17 23:13:25 dafyk

我有同樣的問題，OP。我做2解決它步驟

分居<use>和<defs>到2個不同的<svg>的（不知道這一步是必要的，也有做其他原因）。注意，如果<svg>只有<defs>，則可以使用style="display: none;"使其不佔用佈局空間。
移動<svg>包含<defs>高於<svg>在我的HTML中包含<use>。這一步至關重要。

希望這會有所幫助。必要和工作Safari版本7.1.2截至今天，12/19/1914

來源

2014-12-19 18:37:35

BIG UPVOTE用於移動'

我使用的是<use href="">，它在Firefox/Chrome中沒有問題，但在Safari中沒有問題。所以我不得不更改爲<use xlink:href="">，這解決了我在Safari中的渲染問題。

來源

2017-06-19 17:08:59 Veera

的Safari 6 SVG標籤使用問題的

回答

相關問題