param():给隔离 SVG 传参
开头那张嵌入矩阵留下一个遗憾:一旦把 SVG 用 <img> 或 background-image: url() 引入,它就成了隔离沙箱——外层的 var(--brand) /
color 进不去,内部图形也选不中。想换个主题色,过去只能复制多份文件,或改回 inline。CSS Linked Parameters 草案提出的 param() 想补上这块:在引用处把一个具名参数单向递进资源,SVG
内部用 env() 接住。一份文件,随调用方染色。
下面左右都是 <img src="heart.svg">(矩阵里那个 ❌ 隔离行)。资源内部把填充写成 fill="env(--brand, #94a3b8)"。左图不传 param(),只能显示 fallback 灰;右图把 --brand 传进去后的样子(模拟)。拖调色板,只有右图变:
三种等价的调用写法
三处都把同一个名值递进资源:<img> 走 URL 片段标识符(多参用 & 连接)、link-parameters 是专门的属性(多参用逗号列表)、url() 内把 param 并排写在图片 URL 之后。和
var() 的本质区别:var() 只在同一文档内代换、跨不过资源边界;param() 专为跨资源而设。
被引用的一方:用 env() 接住
提案,尚未落地。 param() / link-parameters 出自早期草案,目前没有任何浏览器实现,上面的右图是把参数代入 env() 后重新编码 SVG 来模拟的效果,不代表真实行为。本系列其余各页讲的都是已落地的机制——把
param() 单列一页,正是想顺着嵌入矩阵那条主线,指出隔离边界未来可能的破口。想深入 param() 与 env() 的接收端语义,见 css-functions · param() 专页。