foreignObject内部CSS变量不生效是因命名空间隔离导致样式作用域断裂，需在foreignObject内显式注入style块定义变量，且Safari等浏览器对此支持更弱。
foreignObject内部的CSS变量不生效，根本不是变量问题
SVG的<foreignObject>本身是XML命名空间下的容器，它内部的HTML内容**不自动继承外部CSS作用域**——哪怕你在<head>里定义了:root变量，<foreignObject>里的<div>也看不到。这不是浏览器bug，而是命名空间隔离导致的样式作用域断裂。
必须手动把变量注入到foreignObject内部的style标签里
外部CSS文件或<style>块不会穿透<foreignObject>边界。常见错误是只在页面级写:root { --color: red; }，却指望<foreignObject><div style="color: var(--color)">能生效。
- 正确做法：在
<foreignObject>内部的HTML中，显式插入<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)会被原样保留为未计算文本。
- 必须手动创建元素并注入：
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>注入，或确保父级HTML已挂载且变量可用 - 别依赖
fo.svg()` 或 `fo.doc()` ——它们返回的是SVG命名空间节点，不是HTML上下文</li> </ul> <H3>Safari下连内部style里的var()都可能被忽略</H3> <p>Safari对<code><foreignObject>
内嵌HTML的CSS解析更保守，尤其当父<svg>有transform、opacity < 1或backdrop-filter时，整个<foreignObject>的渲染树可能被降级，导致var()计算失败或回退为空值。立即学习“前端免费学习笔记（深入）”；
- 临时验证：移除父SVG所有可疑CSS，看
var(--x)是否恢复 - 长期方案：把
<foreignObject>提到<body>顶层，用JS手动同步坐标位置 - 别用
calc(var(--x) + 10px)这类复合表达式——Safari对var()在calc里的支持不稳定
<foreignObject>是个“样式孤岛”——你得像部署一个独立微前端那样，把变量、样式、甚至字体都完整带进去。 - 临时验证：移除父SVG所有可疑CSS，看
