Question

或只是

<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个圆圈。似乎所有＆lt; use＆gt;标签不会在Safari 6中呈现。

请帮忙吗？

Answer 1

我有同样的问题，OP。我通过做两步来解决它

将<use>和<defs>分隔为2个不同的<svg>（不确定是否需要执行此步骤，还必须出于其他原因这样做）。附注，如果<svg>只有<defs>，您可以使用style="display: none;"使其不占用布局空间。
将包含<svg> <defs>的{{1}}移至我的HTML中包含<svg>的{{1}}。这一步至关重要。

希望这会有所帮助。截至今天，2014年12月19日，Safari版本7.1.2是必需和工作的

Answer 2

sam.kozin的回答对我有用。这样，这个答案实际上具有可见性。

替换＆lt; use ... /＆gt;与＆lt; use ...＆gt;＆lt; / use＆gt;

所以：

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

Safari 6 svg标签使用问题

4 个答案: