← 🔷 SVG × CSS:一块能被 CSS 管的画布 / param():给隔离 SVG 传参 待审核 8 / 9
link params · 提案 ★

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() 专页。