6

链接：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 中呈现。

请问有什么帮助吗？

4

4 回答 4

7

我有同样的问题，OP。我通过两个步骤解决了它

  1. 将 the<use>和 the<defs>分成 2 个不同<svg>的 （不确定这一步是否必要，也因为其他原因不得不这样做）。旁注，如果一个<svg>only has <defs>，您可以使用style="display: none;"它使其不在布局中占用空间。

  2. 在我的 HTML 中移动了<svg>包含<defs>ABOVE 的内容<svg>。<use>这一步至关重要。

希望这可以帮助。截至今天，12/19/14 是 Safari 7.1.2 版的必需和工作

于 2014-12-19T18:37:35.773 回答
5

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>​
于 2013-05-30T17:31:55.920 回答
2

我使用<use href="">的是在 Firefox / Chrome 中没有问题的渲染，但在 Safari 中没有。所以我不得不改变<use xlink:href="">，这解决了我在 Safari 中的渲染问题。

于 2017-06-19T17:08:59.357 回答
0

检查您是否使用正确的 http 内容类型标头并将您的文档作为有效的 XML 提供。此类似问题中的更多信息。

于 2012-10-17T23:13:25.187 回答