为什么CSS变量在SVG的foreignObject中失效？-css教程-PHP中文网

foreignobject内部css变量不生效是因命名空间隔离导致样式作用域断裂，需在foreignobject内显式注入style块定义变量，且safari等浏览器对此支持更弱。

为什么css变量在svg的foreignobject中失效？

foreignObject内部的CSS变量不生效，根本不是变量问题

SVG的<foreignobject></foreignobject>本身是XML命名空间下的容器，它内部的HTML内容**不自动继承外部CSS作用域**——哪怕你在里定义了:root变量，<foreignobject></foreignobject>里的<div>也看不到。这不是浏览器bug，而是命名空间隔离导致的样式作用域断裂。 <h3>必须手动把变量注入到foreignObject内部的style标签里</h3> <p>外部CSS文件或<code><style></style>块不会穿透<foreignobject></foreignobject>边界。常见错误是只在页面级写:root { --color: red; }，却指望<foreignobject><div style="color: var(--color)">能生效。 <ul> <li>正确做法：在<code><foreignobject></foreignobject>内部的HTML中，显式插入<style></style>块（注意xmlns声明）

示例：

<foreignobject width="200" height="100"><div xmlns="http://www.w3.org/1999/xhtml">
    <style>:root { --bg: #222; }</style>
<div style="background-color: var(--bg);">Hello</div>
  </div>
</foreignobject>

不能用<link rel="stylesheet">加载外部CSS——XML环境下不支持

svg.js v3+中直接调用html()会丢掉变量，因为根本不走CSS解析流程

如果你用的是svg.js库，foreignObject.html('<div>...</div>')这种写法在v3+版本已被废弃。它只是把字符串当纯文本插入DOM，**完全跳过HTML解析和CSS变量计算流程**，所以var(--x)会被原样保留为未计算文本。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须手动创建元素并注入：

const fo = draw.foreignObject(200, 100);
const div = document.createElement('div');
div.innerHTML = '<div style="color: var(--primary)">Text</div>';
fo.node.appendChild(div);

变量定义仍需在div内部通过<style></style>注入，或确保父级HTML已挂载且变量可用

别依赖

fo.svg()` 或 `fo.doc()` ——它们返回的是SVG命名空间节点，不是HTML上下文

Safari下连内部style里的var()都可能被忽略

Safari对<foreignobject>内嵌HTML的CSS解析更保守，尤其当父<code><svg></svg>有transform、opacity 或<code>backdrop-filter时，整个<foreignobject></foreignobject>的渲染树可能被降级，导致var()计算失败或回退为空值。