1. 简介
SVG 可以使用 CSS 设置样式， 当其内联用于 HTML 中时， 此功能会非常有用。 例如，只需对 SVG 图标应用一条 :hover 规则， 更改其 fill 属性， 便可根据用户是否将鼠标悬停在图标上，使其呈现不同的颜色。
当 SVG 以不允许外部页面中的选择器或 CSS 继承
应用于它的方式引用时
（例如在 HTML 中通过
img
或
iframe
嵌入），
此功能便会丧失。
更改此类“外部”SVG 图像显示方式的唯一方法
是制作多个图像，
并更改所引用的图像。
由于需要下载新资源，这会导致页面出现延迟，
并且无法使用 CSS 过渡等动态效果。
CSS 链接参数 是一种在“外部”资源上设置 CSS 自定义环境变量的方式， 可以通过 CSS 属性 或 URL 上的特殊片段方案进行设置。 这使“外部”SVG 图像能够获得“内联”SVG 图像所具有的 一部分有限但强大的可定制能力。
链接参数是一个 由 <dashed-ident> 名称 和任意（可能为空的）<declaration-value> 值组成的对。
< svg > < path fill = "env(--color, black)" d = "..." /> </ svg >
默认情况下，它会用黑色填充其形状， 因为指定的后备颜色是黑色。 但链接 参数可以通过多种方式定制颜色：
< img src = "image.svg#param(--color,green)" >
img{ link-parameters : param ( --color, green); }
.foo{ background-image : url ( "image.svg", param(--color, green )); }
2. 设置链接参数
外部资源可以附带一个链接参数列表， 其中每个条目都由作为键的 <dashed-ident> 和作为值的（可能为空的）<declaration-value> 组成。
可以通过三种方式指定链接参数：
-
通过 link-parameters 属性， 该属性应用于资源本身 （如果该元素表示外部资源）， 以及该元素的 CSS 属性中使用的所有外部资源
-
通过外部资源 URL 的片段部分中的特殊语法
如果通过多种方式指定， 所有链接 参数都会按照以下顺序附加到外部资源的单个列表中：
-
元素上的 link-parameters 属性（如适用）
-
param() URL 片段标识符
-
param() <url-modifier>，位于 url() 中
如果存在多个名称相同的链接 参数， 则使用列表中的最后一个。
如何在链接资源中访问链接 参数 将在下一节 § 3 使用链接参数中定义。
2.1. 在 CSS 中：link-parameters 属性
| 名称： | link-parameters |
|---|---|
| 值： | none | <param()># |
| 初始值： | none |
| 适用于： | 所有元素和伪元素 |
| 继承： | 否 |
| 百分比： | 不适用 |
| 计算值： | 与指定值相同 |
| 规范顺序： | 按语法 |
| 动画类型： | 离散 |
link-parameters 属性是在元素本身上设置链接参数的一种方式
（如果该元素表示外部资源，
例如 HTML
img
或
iframe），
也可在元素上指定的所有外部 CSS 资源上设置链接参数
（例如背景图像等）。
其值为：
param() 函数指定一个链接参数， 其键为 <dashed-ident>， 值为 <declaration-value>?。 （如果省略 <declaration-value>， 则表示空值。） 其语法如下：
<param()> = param( <dashed-ident> , <declaration-value>? )
2.2. 在 URL 中
可以在用于引用外部资源的 URL 的片段中 使用一种特殊的“片段标识符”。 SVG 文档现有“片段标识符”的若干示例可在 SVG 1.1 规范中找到。
SVG 参数片段标识符的语法为：
param( <dashed-ident> , <declaration-value>? )
（使用 CSS 值定义语法；TODO 为其定义实际的解析器）。
http://example.com/image.svg#param(--text-color,blue)”。
可以通过向 URL 附加多个 param() 片段标识符，
将多个链接
参数传递给图像。
当它们相互组合或与其他“片段标识符”组合时，
每个值都用一个 & 字符分隔，
与 URL 的查询参数相同。
http://example.com/image.svg#param(--text-color,blue)¶m(--bg-color,white)”，
从而同时设置 env(--text-color) 和 env(--bg-color)。
注意：空格以及某些其他在 CSS 语法中
可能有效的字符，
严格来说在 URL 中无效。
在某些上下文中，
可能需要转义这些字符才能形成有效的 URL。
不过，在大多数情况下，
例如 HTML 的
a
元素或 CSS 的 url() 函数，
空格是可接受的，无需转义。
2.3. 通过 CSS url() 函数设置
通过 CSS 引用外部资源时， 可以在 url() 函数中 使用 param() 函数。 但一种常见用例是传入页面自身自定义 属性的值； 例如，页面可能使用 --primary-color 自定义属性， 并希望 SVG 图像与其匹配。 但是，无法将 CSS 中自定义 属性的值整合到传递给 url() 函数的 URL 中。
为实现这一点， param() 是一种 有效的 <url-modifier>。 所有指定为 <url-modifier> 的 param() 都会像 link-parameters 一样定义链接参数。
.foo{ background-image : url ( "http://example.com/image.svg" param(--color, var(--primary-color )) ); }
3. 使用 链接参数
当外部资源链接指定了一个或多个链接参数时， 如果链接资源能够理解 CSS （例如 SVG 或 HTML 文档）， 那么这些链接参数 会以其名称和值为该资源建立全局自定义环境变量， 可在样式表中通过 env() 函数访问。
< svg > < g style = "fill: env(--color);" > < path d = "..." /> </ g > </ svg >
隐私考虑
本规范未引入新的隐私考虑。
安全考虑
本规范引入了一种向链接资源传递信息的新方式， 这些信息可能来自恶意来源。
虽然没有为此通道建立明确的握手机制， 但使用 env() 获取这些信息， 可以最大限度地降低链接资源 因这些信息而感到意外的可能性。 页面存在安全漏洞的唯一可能情况 是其样式以某种方式使用了一个未知的 env()， 默认情况下，这只会导致属性无效， 并且可以在开发者工具中看到。
任何恶意信息也只能影响 资源明确选择接受的各个 CSS 属性。