CSS 与布局 / 🔷 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 管到

同一颗心用五种方式放进页面，实测哪些能被外部 CSS 改色、被 currentColor 染、被 :hover 命中。

viewBox · 坐标系

viewBox:SVG 自带的相机

width/height 是页面上的 viewport，viewBox 是架在其中的一台相机：改 w/h 推拉缩放、改 min-x/min-y 平移取景。

attr ↔ CSS · 枢纽 ★

presentation attribute 优先级

fill="red" 是特指度为 0 的 presentation attribute，位于优先级链最底层，任何 CSS 规则都能覆盖它。

transform · 枢轴 ★

transform-origin：旋转枢轴在哪

SVG 内部图形元素的 transform-origin 默认 0 0、transform-box 默认 view-box，于是 rotate() 绕画布原点公转而非原地自转。

fill & stroke · 画笔

fill & stroke：描边与自绘

dasharray 配 dashoffset 实现线条自我绘制；linecap 与 linejoin 管端点拐角；paint-order 换填充描边先后；fill-rule 定自交图形的内外。

paint server · 渐变/units

渐变与图案：画笔工厂

渐变和 pattern 是定义在 defs 里、被 url(#id) 引用的 paint server。gradientUnits 的两种取值是理解 SVG 所有 *Units 行为的钥匙。

综合应用

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

scroll · DOM→SVG ★

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

用 getBoundingClientRect 量出目录项中心，相邻两点串成 cubic Bézier；再用 scroll 比例驱动 clip-path 擦出进度高亮，每帧只改一个 CSS 值。

边界与未来

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

link params · 提案 ★

param()：给隔离 SVG 传参

img 与 background-image 引入的 SVG 是隔离沙箱。CSS Linked Parameters 草案想在引用处把具名参数单向递进资源，内部用 env() 接住。

gaps · SVG 还缺什么

SVG 还缺什么

换个视角看开发者眼中 SVG 仍缺失的能力：文本不会自动换行、stroke 只有 center 对齐，以及性能、morphing、无障碍等机制层面的缺口。

一条主线

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