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提供。 这个类似问题的更多信息。