探How 社区

来源标题：Groundbreaking Upgrade to SVG Is Approaching: Linked Parameters Are Almost Here

SVG 的 Linked Parameters 规范即将在所有主流浏览器中实现。该功能允许从外部为嵌入在 img、background-image 等场景中的 SVG 设置样式，作者认为这会改变很多工作方式。目前该功能尚未进入任何稳定版浏览器。

以下正文由 AI 翻译自 Hacker News 最新（原文版权归原站所有），可能存在偏差，重要内容请以原文为准。

“这项功能将改变一切”可能有点夸张，但它确实会改变很多。在这篇文章里，我会介绍它目前的进展，以及我为什么觉得这件事如此令人兴奋。

我八月份就开始写这篇文章，但一直没写完。现在正是时候！这项功能还没有进入任何稳定版浏览器，所以它不符合我发布“Wishlist Wednesday”系列文章的计划。毕竟，我真希望自己多年前就能用上它。所以——对于一篇“每日挑战”文章来说，这篇可能篇幅偏长、链接偏多——原因就在于它有一份旧草稿。

那么！🔜™️ Linked Parameters 规范的实现将落地所有主流浏览器。没错，是全部！

你有没有想过从外部给 SVG 文件设置样式？比如当它被包含在 <img> 里，或者用作 background-image，或者 border-image……好吧，最后一种有点勉强，但如果你真的试过——欢迎加入我的俱乐部，哈哈。

不过说真的。如果你在做某个设计系统，需要给一些 SVG 设置样式，那你很可能在用某个过度设计的库，把 SVG 嵌进你的 JSX，然后它被打进你的 React bundle 之类的东西里，一旦那个 SVG 里有任何东西需要变化，就动态重新渲染。

几兆字节无法缓存的 SVG 代码，还得通过 JS 解析和应用。“真有意思”！

这篇文章里我不会展示任何在线示例——我已经在那篇关于原生 linked parameters 缺失的变通方案的文章里给了几个，下面我也会链接到许多文章、讲解和其他链接，它们能比我更好地说明这件事。

简而言之，如果你有一些 SVG，你就可以在 SVG 的 CSS 里通过自定义 env() 变量，把其中某些值标记为来自外部：

rect {
  fill: env(--color, pink);
}

然后从外部 CSS 传入这个变量（还有其他方式可以做到；用声明是我偏好的方式）：

.icon {
  background: url('my-icon.svg');
  link-parameters: param(--color: deepPink);
}

注意：该规范的早期版本使用的是 param(--foo, bar)，但在最近的一次 CSSWG 会议上，我们决议改用冒号语法，类似于我们现在在 if() 中的做法，以及未来自定义函数和 mixin 的命名参数（一旦它们最终支持命名参数）将会采用的做法。

如果你在某个实验性实现里尝试这一点，那些实现可能仍在用旧语法。

这篇文章我想重点指出的主要三件事是：

目前所有主流浏览器都在进行相关实现。
长期以来，作者们对此有着浓厚的兴趣。
对于这能给 Web 平台整体带来什么，我有自己的看法。

它已经进入 Firefox Nightly！这里是 bugzilla 上的 meta bug，由 Sebastian Zartner 于 2023 年 1 月 24 日创建。

实现工作于 2026 年 3 月由 Tyler Thrailkill 启动，他是在 Emilio Cobos Álvarez 公开邀请有人来参与这项功能并接受指导之后接下这项工作的。这有多酷？

Chromium 方面的工作由 Divyansh Mangal 启动，Rahul Singh 接续推进，依据是 2026 年 6 月 19 日发布的相应 Microsoft Edge Explainer，而该 Explainer 又遵循了一份 Blink 设计计划。

这里是该功能的 Chrome Status 页面。

最初的 Chromium issue 由 Rune Lillesveen 于 2023 年 12 月 11 日创建。

WebKit 方面也已经有许多来自 Taher Ali 的 PR 被合并，从 2026 年 7 月 28 日开始。

而且——它在 2026 年 10 月 8 日的“Release Notes for Safari Technology Preview 254”中被提及！并且在 WebKit CSS Feature Status 中被列为“supported”，尽管我还没有在 Safari Release Notes 的任何地方看到它。

所以，在短短几个月内，实际工作已经启动，并且在所有主流引擎中都仍在积极推进！

这是作者们长久以来一直想要的东西！

我找到的最早提案来自 Doug Schepers——一份 2009 年 6 月 16 日的工作草案！

后来，有一份由 Tab Atkins-Bittner、Daniel Holbert 和 Jonathan Watt 于 2018 年 9 月 14 日撰写的非官方提案草案。

另一个推动它前进的值得注意的 issue 是 Lea Verou 于 2024 年 1 月 28 日创建的那个。

2025 年 3 月 24 日，我发表了《Passing Data into SVG: Linked Parameters Workaround》一文。里面的代码很讨人厌，但我强烈推荐读一读文章本身——里面有很多有趣的内容。不确定我的文章对这项功能目前正在被推进起了多大作用，但它至少被 Microsoft 的 explainer 在“Evidence of developer demand”下提到了。

像往常一样，我在文章里提到了许多其他人，其中我想从中挑出两个值得注意的提及，它们促成了我写那篇文章，来自两个非常不同的时间点：

2025 年 1 月 31 日 Ivy Reese 的 Mastodon 帖子带来的火花。
以及 2023 年 6 月 3 日 Estelle Weyl 的一篇文章，作为我旧草稿的种子。

另一个推动来自 Ollie Williams 于 2025 年 9 月 4 日创建的一个潜在的 Interop 议题 issue。它没有被接受，在任何引擎承诺支持之前这多少在意料之中，但前面已经提到，Divyansh Mangal 于 2025 年 10 月 23 日提交了初始的 WPT 测试。

Patrick Brosset 在他 2026 年 6 月 22 日的《What's missing from SVG》一文的第一点中提到了 linked parameters。

Dave Letorey 在 2026 年 7 月贡献了 link-parameters CSS 属性的 MDN 参考文档。

Vadim Makeev 于 2026 年 9 月 23 日发表了《One SVG, nine posters: CSS linked parameters》一文。

Lea Verou 在 2026 年 10 月 11 日的近期文章中有“Linked parameters = arbitrary customizations!”一节。

最后，今年我们也收到了来自 Ollie 的 Interop 提交，虽然我们不知道它是否会被接受，但考虑到所有浏览器都在做这项功能，我认为没有人会否决它。

它仍可能进不了 Interop，因为还有许多规范问题待解决，但嘿，现在可能性高多了！而且——我很确定——如果它进不了明年的 interop，那也会进 2028 年的。

（原文较长，此处译出前 6000 字，完整内容请点「打开原文」。）

正文由探How 从来源站点 RSS 同步，内容未经改写；遇到排版缺失或需要图片、视频时请以原文为准。

SVG 即将迎来重大升级：链接参数功能即将落地