Safari 6 svg標簽使用問題

Question

鏈接： http ： //jsfiddle.net/xkpeD/

要不就

<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，Firefox，Safari 5.1）中都顯示正常，但在新的Safari 6中，只渲染了1個圓圈。 似乎所有<use>標簽都沒有在Safari 6中呈現。

有什么幫助嗎？

Answer 1

我有同樣的問題，OP。 我通過兩步完成了它

1. 將<use>和<defs>分成2個不同的<svg> （不確定是否需要此步驟，還必須出於其他原因）。 旁注，如果<svg>只有<defs> ，你可以使用style="display: none;" 使它不占用布局中的空間。

2. 移動<svg>包含<defs> ABOVE包含HTML中<use>的<svg> 。 這一步至關重要。

希望這可以幫助。 截至今天12/19/14，Safari版本7.1.2是必需的並且正在工作

Answer 2

sam.kozin的回​​答對我有用。 這樣，這個答案實際上具有可見性。

將<use ... />替換為<use ...> </ use>

所以：

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

Answer 3

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

Answer 4

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