CSS变量可作为JS与样式层的数据桥梁，用于传递数值控制图表视觉表现，但需注意声明、单位处理、SVG兼容性及IE回退等关键细节。
怎么用 CSS 变量传数值给图表样式
CSS 变量本身不能直接参与计算或驱动 SVG/Canvas 图表逻辑，但可以作为“数据桥梁”把 JS 计算好的数值同步进样式层，用于控制颜色、尺寸、动画进度等视觉表现。关键不是让 CSS 做运算，而是让它可靠接收和响应数值。
-
--chart-height、--data-point-1这类自定义属性必须在 :root 或目标元素上显式声明，否则var(--xxx)会回退到默认值（通常是无效值） - JS 修改时推荐用
element.style.setProperty('--data-point-1', '42')，避免直接拼字符串到style属性里导致覆盖其他内联样式 - 数值单位要提前约定好：CSS 变量不带单位，所以
--bar-width: 80和width: calc(var(--bar-width) * 1px)才能生效；写成--bar-width: 80px后续就很难再做数学运算
CSS 变量在 SVG 图表里怎么用才不翻车
SVG 元素支持 CSS 自定义属性，但部分属性（如 cx、cy、r）原生只接受绝对长度或百分比，不能直接写 cx: var(--center-x) —— 必须配合 attr() 或通过 CSS 控制 transform 等间接方式。
- 圆点位置建议用
transform: translate(var(--x), var(--y))，而不是试图改cx/cy属性值 - 条形图高度可用
height: calc(var(--value) * 1px)，前提是 JS 传入的是纯数字（如75），不是"75px" - IE 完全不支持 CSS 变量，如果需兼容，得 fallback 到 data-* 属性 + JS 读取，或直接用内联 style
为什么 calc(var(--n) + 10) 有时不生效
常见原因是变量未定义、类型错位或单位混用。CSS 的 calc() 对类型极其敏感：两个操作数单位必须一致，或其中一个是无单位数字。
- 错误示例：
--offset: 20px→calc(var(--offset) + 10)会失败，因为20px + 10类型不匹配 - 正确做法：JS 传纯数字
20，CSS 写left: calc(var(--offset) * 1px + 10px) - 调试技巧：在 DevTools 里鼠标悬停
var(--xxx)，看是否显示“invalid value”；或者临时加content: var(--xxx)到伪元素里输出值
JS 传值和 CSS 响应之间有延迟吗
没有渲染级延迟，但要注意触发时机。CSS 变量更新是同步的，但样式重算和重绘取决于浏览器是否认为相关属性已变更，以及是否处于可绘制状态。
立即学习“前端免费学习笔记（深入）”；
- 批量修改多个变量时，用
element.style.cssText = '--a:1;--b:2;--c:3;'比连续调用setProperty更高效，减少 layout thrashing - 如果图表依赖
getComputedStyle读取变量值做后续计算，记得加requestAnimationFrame确保样式已更新 - 动画场景下，别用 CSS 变量驱动
transition的非可动画属性（如display），它不会触发过渡，只会突变
CSS 变量不是数据容器，它只是个传递通道——JS 得负责把干净、带上下文的数值塞进去，CSS 负责用对的方式接住它。漏掉单位处理、忽略浏览器兼容性边界、或者误以为它能替代 JS 数据逻辑，这三处最容易出无声故障。
