Safari 6 svg 标签使用问题答案

【问题标题】：Safari 6 svg tag use issuesSafari 6 svg 标签使用问题
【发布时间】：2018-09-21 20:47:00
【问题描述】：

或者只是

<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 个圆圈。似乎所有标签都没有在 Safari 6 中呈现。

有什么帮助吗？

【问题讨论】：

你试过把部分放在元素之前吗？
在此处查看最后一条评论：stackoverflow.com/questions/11514248/…。如果他们尚未解决此问题，您可以尝试将替换为作为快速解决方法。
谢谢，山姆！不幸的是，这在 6.0.4 中仍然是一个问题

标签： svg safari safari6

【解决方案1】：

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

将<use>和<defs>分成2个不同的<svg>（不确定这一步是否必要，也因为其他原因不得不这样做）。旁注，如果<svg> 只有<defs>，您可以使用style="display: none;" 使其不占用布局空间。
在我的 HTML 中将包含 <defs> 的 <svg> 移至包含 <use> 的 <svg> 上方。这一步至关重要。

希望这会有所帮助。截至今天，12/19/14 为 Safari 7.1.2 版提供必要且有效

【讨论】：

强烈支持移动<svg> w/ <defs> 高于<svg> 和<use>！！谢谢。

【解决方案2】：

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>

【讨论】：

【解决方案3】：

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

【讨论】：

如果您使用 JavaScript 设置属性，则只能使用 useElem.setAttributeNS ('http://www.w3.org/1999/xlink', 'xlink:href', '#your-href');。即使在 Inspector 中看起来正确，使用以下命令也会失败：useElem.setAttribute ('xlink:href', '#your-href');.

【解决方案4】：

检查您是否使用了正确的 http 内容类型标头并将您的文档作为有效的 XML 提供。更多信息在这个类似的question。

【讨论】：