关于 SVG 中 xlink:href 已被弃用

一位读者写信告诉我，我们应该更新有关 SVG <use> 元素的文章。我们一直使用的属性 xlink:href 已被弃用。事实上，MDN 说

Deprecated since SVG 2
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

这是一种非常强烈的措辞，因此读者的警告是有道理的。这让我有点惊讶，因为SVG 2 的事情有点奇怪。看起来它确实变成了候选推荐。

所以…

<!-- This is old -->
<svg>
  <use xlink:href="#whatever" />
</svg>

<!-- This is new -->
<svg>
  <use href="#whatever" />
</svg>

我喜欢它。但它真的有效吗？让我分叉我那简陋的旧演示，并更改所有引用。在快速浏览一下我可以轻松访问的内容后

Chrome 67	Firefox 61	Safari 11	Edge 17	IE 11	iOS 11
✅	✅	🙅‍♂️	✅	✅	🙅‍♂️

比我想象的要好！但是，由于有太多🙅‍♂️ 不支持的地方，直接切换所有内容似乎太危险了，尤其是当xlink:href 拥有广泛的支持时。

浏览器真的会撤回支持吗？我敢打赌，它们永远不会这样做。还有很多使用旧格式属性的网站永远不会更新，我们知道浏览器非常重视防止旧网站出现问题（好极了）。

感觉就像使用:before 和::before 一样。是的，::before 是新的、更正确的语法。但是，没有浏览器会撤回对:before 的支持（我敢打赌再赌 50 美元），因为这只会毫无必要地导致网站出现问题。因此，由于这个原因，使用:before 可能最有意义，因为这样可以获得最广泛的支持。

除非发生奇怪的事情，某个浏览器真的撤回了支持，否则我可能不会更新使用<use xlink:href="" /> 的旧文章。

Amelia BR

# 2018 年 7 月 30 日

是的，MDN 的“正在被删除”的通用模板有点过于乐观。

即使 Safari/iOS 最终添加了对不带xlink 的href 的支持，浏览器也需要根据当前规范保持对xlink 版本的向后兼容支持，我不希望这种情况在未来的规范中发生改变。

没有安全原因需要删除它，更改只是为了让作者更方便。对作者来说，破坏旧网站没有好处！

SVG 规范中已经出现过其他更改，其中一些功能被完全删除，但只有在这些功能从未获得普遍支持或使用量很少的情况下才会发生。 xlink:href 不符合该测试。

因此，xlink:href 很可能永远保持“已弃用”（不是推荐的解决方案，但浏览器必须保持支持），而不会转换为“已废弃”（不再有效）。

MaxArt

# 2018 年 7 月 30 日

对 IE11 的支持感到惊讶。
所以，如果我想只使用 href，我该怎么办？等待 Safari 更新，还是同时使用两个属性？
不过，我觉得后者没什么意义…

Anthony

# 2018 年 7 月 30 日

如果你不更新文章，你就是导致弃用代码无法更新的原因之一。也是浏览器开发人员逃避优先添加对新标准支持的原因。浏览器开发人员讨厌因为代码支持被撤回而导致旧网站出现问题，但也讨厌因为浏览器不支持新标准而导致新网站出现问题。因为在后一种情况下，这将是用户切换浏览器的更强大的驱动力。如果 SVG 在 iOS 上开始显示异常，Apple 会在用户切换到朋友使用的永远不会出现此问题的其他浏览器之前立即添加支持。

不过，这篇文章很有见地。

Angus M

# 2018 年 7 月 30 日

我从 SVG 中删除了“xlink:href”，改用“href”，然后发现 iOS 浏览器（Chrome、Safari）不再处理链接。我的解决方法是简单地使用两种变体：除了不优雅的重复之外，还有其他原因不能这样做吗？

xlink:href 可能已被弃用，但在仍然有广泛使用的浏览器依赖它的情况下将其从代码中删除似乎不是一个好主意。

Kartik Prabhu

# 2018 年 7 月 30 日

不要忘记 xlink 的命名空间。我之前遇到过这个问题，并写了一篇文章 https://kartikprabhu.com/articles/href-in-svg

Casey Ydenberg (@CAYdenberg)

# 2018 年 7 月 30 日

似乎没有理由不使用这两个属性，对吗？

Anders Grimsrud

评论永久链接# 2018 年 8 月 4 日

SVG2 规范甚至建议使用这两个属性；

为了向后兼容，具有“href”属性的元素也识别 XLink 命名空间 [xlink] 中的“href”属性。

当“href”属性同时出现在 XLink 命名空间中和没有命名空间的情况下，将使用没有命名空间的属性的值。 XLink 命名空间中的属性将被忽略。

来源：w3.org/TR/SVG2

Jaime Blázquez

# 2018 年 7 月 31 日

我尝试了同时编写这两个属性，似乎有效。因此，我的策略将是
– 保持旧代码原样。很可能永远有效，如果在将来的某个时间，弃用生效并且浏览器撤回了支持，它将非常旧，并且图标可能只是一个问题:-)。而且没有人会向你索回那 50 美元。
– 在新代码中同时编写这两个属性。现在以及弃用后它都能正常工作。如果你使用宏、组件、混合器…等等，这将很容易，否则就需要多打一些字。
– 当 iOS 和 Safari 支持它时，删除命名空间版本。

Dean Edridge

# 2018 年 7 月 31 日

您应该能够使用 JavaScript 使 SVG 上的href="" 正常工作。多年前，Eric Meyer 支持这个想法，或者提出了这个想法，允许在 HTML5 规范中为更多元素使用href=""。我也支持这个想法，但不幸的是，这个想法被拒绝了，从未被纳入 HTML5 规范。我很确定 Eric 写了一个脚本让链接正常工作，用于演示（参见第二个链接）。当然，这可以用来启用链接，直到浏览器支持得到改善。

https://meyerweb.com/eric/html-xhtml/html5-linking.html

ccprog

# 2018 年 7 月 31 日

查看浏览器并不能说明全部问题。您需要考虑独立 SVG 的编辑器和渲染器的支持情况。

在现实世界中，绝大多数现有的 SVG 文件都是使用 Inkscape 或 Adobe Illustrator 创作的。两者都不支持不带xlink: 的href，无论是读取还是写入。

有很多正当理由需要进行服务器端渲染以生成光栅格式。您很可能会使用 ImageMagick，实际上这意味着实际渲染将委托给 librsvg 或 Inkscape。 librsvg（用于在 Gnome 桌面渲染图标的工具，也是迄今为止最快的渲染器）也需要命名空间。不要考虑使用更旧的工具，比如 Java Batik 库。

（另一个广泛的应用是 SVG 到 PDF 的转换，但我对此无法发表评论。）

省略命名空间听起来可能很“现代”，但它不会在可预见的未来生成可重用代码。保留它只是多了一些字节，不会给任何人带来麻烦。

Harish

# 2018 年 8 月 3 日

嗨，如果我使用“href”，它在 Chrome 中不起作用，而 xlink:href 仍然在 SVG 中有效。没有被弃用….

Geoff Graham

评论永久链接# 2018 年 8 月 3 日

它在规范中仍然被弃用，但浏览器是否继续支持它取决于浏览器本身。所以，是的，你说得对，Xlink:href 在 Chrome 中没有被弃用。 :)

Kyle Bavender

# 2018 年 8 月 16 日

提醒一下——最新的 Safari Technology Preview 版本（v63）昨天（8 月 15 日）添加了 href 支持。请参阅：https://webkit.org/blog/8403/release-notes-for-safari-technology-preview-63/

此评论线程已关闭。如果你有重要信息需要分享，请联系我们联系我们。