SVG 使用在 Safari 中不起作用答案

【问题标题】：SVG use not working in SafariSVG 使用在 Safari 中不起作用
【发布时间】：2017-10-13 04:40:24
【问题描述】：

我在我的 html 文件中使用了这个 svg 标签。它在 Chrome 中完美运行，但在 safari 中没有出现图标

<svg width="25" height="23" viewBox="0 0 25 23">
       <use href="./icons.svg#helemet"></use>
 </svg>

知道为什么吗？

【问题讨论】：

【解决方案1】：

Safari 还不支持 href，你需要使用 xlink:href 来代替。

href 是即将到来的 SVG 2 规范的一个新特性。 xlink:href 是 SVG 1.1 版本。

Chrome、Firefox 和 Edge 都支持 xlink:href 和 href。

【讨论】：

然后您需要更新 SVG 根元素。见stackoverflow.com/questions/29884930/…
Safari 本周刚刚增加了对<use href='...'> 的支持，但稍旧的版本仍然需要xlink:href。因此，虽然使用不推荐使用的属性感觉很糟糕，但对于跨浏览器支持来说，它是目前最安全的。
@dmbaughman 你有那个支持的参考吗？最好更新developer.mozilla.org/en-US/docs/Web/SVG/Element/use。谢谢！

【解决方案2】：

这是 2019 年未来的更新。只需添加xlink:

<svg role="img">
    <use xlink:href="/path/to/svg#id"></use>
</svg>

适用于 IOS 12

【讨论】：