← 首页 / 🔷 SVG × CSS：一块能被 CSS 管的画布 待审核 9 页

🔷 SVG × CSS：一块能被 CSS 管的画布

<canvas> 绘制后只剩像素;SVG 不同——每个图形都是 DOM 节点,能被 CSS 选中、被 :hover 命中、被 currentColor 染色,且缩放后不失真。这一特性 (retained-mode + 声明式) 决定了「CSS 能否、以及如何作用到 SVG 内部」。本系列不涉及 path 命令 (那是 css-paths 的主题),只讲 SVG 作为一种图形介质的运行机制:它如何进入页面、坐标系如何搭建、CSS 如何逐层驱动它的上色与描边、渐变为何能随形状缩放。

九页分三组。已落地的机制讲 SVG 能被 CSS 驱动的全部要件:嵌入矩阵、viewBox 坐标系、presentation attribute 优先级、transform 枢轴、fill / stroke 画笔、渐变与 *Units。综合应用把这些机制组合成一个真实场景:用 getBoundingClientRect 量出 DOM 坐标、实时生成连线 path,再以 scroll 位置驱动 clip-path 做进度高亮——文档目录连线的做法。边界与未来收两页:param() 提案想给隔离的外部 SVG 开一扇传参口,以及一份「SVG 还缺什么」的开发者反馈清单。本系列大量涉及 CSS cascade 与优先级,若需复习可参考 how-css-works。

已落地的 CSS × SVG 机制

SVG 能被 CSS 驱动,是因为它的图形是真实 DOM、上色 / 描边属性几乎都同时是 XML 属性和 CSS 属性。这六页用同一套模型逐层拆解。

embed · 嵌入矩阵

嵌入矩阵：谁能被 CSS 管到

同一颗心，用 inline / <use> / <img> / background-image / <object> 五种方式放进页面，实测哪些能被外部 CSS 改色、被 currentColor 染、被 :hover 命中。复用三件套 <defs> / <use> / <symbol>，以及 SVG 没有 z-index、pointer-events 取值更多两条反直觉特性。

viewBox · 坐标系

viewBox:SVG 自带的相机

width/height 是页面上的 viewport,viewBox 是架在其中的一台相机：改 w/h 推拉缩放、改 min-x/min-y 平移取景。拖四个值看绘图坐标与显示像素如何解耦；preserveAspectRatio 的 align × meet/slice 决定宽高比不符时怎么塞。

attr ↔ CSS · 枢纽 ★

presentation attribute 优先级

fill="red" 其实是特指度为 0 的 presentation attribute，位于优先级链最底层，任何 CSS 规则都能覆盖。四层阶梯实测 cascade 胜出者；cx / r / d 升级为 CSS 几何属性可 transition;currentColor 与 var() 穿透 <use> 做主题化图标。

transform · 枢轴 ★

transform-origin：旋转枢轴在哪

SVG 内部图形元素的 transform-origin 默认 0 0、transform-box 默认 view-box，于是 rotate() 绕画布原点「公转」而非原地自转。拖角度看枢轴位置，transform-box: fill-box 才把枢轴钉回图形自己身上。

fill & stroke · 画笔

fill & stroke：描边与自绘

stroke-dasharray = 路径全长 + 滑动 dashoffset 实现「线条自我绘制」；linecap / linejoin 的端点与拐角；paint-order 切换填充与描边的先后；fill-rule 的 nonzero / evenodd 决定自交图形哪里算「里面」。

paint server · 渐变/units

渐变与图案：画笔工厂

渐变和 <pattern> 是定义在 <defs> 里、被 url(#id) 引用的 paint server。调一支渐变笔看 spreadMethod;gradientUnits 的 objectBoundingBox vs userSpaceOnUse 是理解 SVG 所有 *Units 行为的钥匙。

综合应用

把上面的机制组合进一个真实场景:SVG 的图形是坐标驱动的,坐标可以来自 getBoundingClientRect 量出的真实 DOM 布局——于是「连接任意两个 DOM 节点」这件 HTML / CSS 做不到的事,交给一段实时生成、再被 scroll 驱动的 SVG。

scroll · DOM→SVG ★

把 DOM 坐标画成 SVG：目录连线

HTML / CSS 画不出「连接两个嵌套标题的平滑曲线」——那需要坐标系。用 getBoundingClientRect 量出每个目录项的中心，深度定横向、中心定纵向，相邻两点 cubic Bézier 串成连线，SVG 完全是 DOM 的派生物。再叠一条深色 progress，用 scroll 比例驱动 clip-path: inset() 自下而上「擦」出进度高亮：每帧只改一个 CSS 值，不触发 layout。fumadocs 那类文档目录连线的拆解。

边界与未来

已落地机制之外:隔离边界未来可能的破口,以及开发者眼中 SVG 仍缺失的能力。

link params · 提案 ★

param()：给隔离 SVG 传参

<img> / background-image 引入的 SVG 是隔离沙箱，外层变量进不去。CSS Linked Parameters 草案的 param() 想在引用处把具名参数单向递进资源、内部用 env() 接住，一份文件随调用方染色。提案尚未落地，本页右图为模拟。

gaps · SVG 还缺什么

SVG 还缺什么

换个视角：开发者眼中 SVG 仍缺失的能力。文本不会自动换行（对照 <foreignObject>）、stroke 只有 center 无 inside / outside（clip / mask 模拟），以及性能、morphing、geometry API、无障碍、interop 等偏机制层面的缺口清单。

一条主线

SVG 之所以能被 CSS 驱动,是因为它的图形是真实 DOM,且它的上色 / 描边属性几乎都同时是 XML 属性和 CSS 属性。读完已落地的六页,即可用同一套模型解释:为什么图标用 inline、为什么 viewBox 一改就缩放、为什么一条 CSS 规则能覆盖直接写在标签上的颜色、为什么渐变有时随形状缩放有时不随。