d · SVG 形变

d：连 SVG 的路径本体都成了 CSS 属性

SVG 元素上的 fill、stroke 这些 attribute 都是 presentation attribute——它们同时是 CSS 属性，样式表能直接覆盖。后来连 <path> 的 d 也加入了这个行列：CSS 里写 d: path("…") 就能改写路径本体。这意味着 :hover、媒体查询、transition / animation 这些 CSS 机制，全都能用来「换形状」。

1 · 折线图换数据：transition 一条 d 就够

图 1-1 · 折线图换数据时对一条 d 做过渡。可切换数据组，观察折线连续变形而非跳变。

2 · blob 悬停鼓包：伪类换形

:hover 里那条 d 是与静止态同结构的「歪 blob」。

图 2-1 · 用伪类换形做的悬停鼓包。:hover 里那条 d 与静止态同结构，因而可以插值。

3 · 三条规则

宿主只能是 SVG 的 <path>，且把 d 当 CSS 属性用的支持面并不完整：Chromium 52+ 与 Firefox 97+ 支持，Safari 至今未实现，MDN 标为 limited availability（据 MDN BCD，核对于 2026-08）。HTML 元素没有 d 属性——HTML 那边的对等能力是 clip-path / offset-path。值也只有两种：path("…") 或 none。

形变要求命令序列结构一致。和 clip-path 进阶 §4 同一条规则：M+5L 只能变到 M+5L,M+4C+Z 只能变到 M+4C+Z。结构不同就瞬间跳变。设计 morph 素材时，通常先把两个形状都「转写」成相同数量的 C 命令。

CSS 声明优先于 attribute。markup 里的 d="…" 是 presentation attribute，特异性为 0 且被排在作者样式表最前，因此任何作者规则都能覆盖它——所以样式表里的 d: 声明总能覆盖它，这正是「切换主题 / 响应式替换图标」无需修改 markup 的原因。

图 3-1 · §1 折线图的全部样式，含 d: path(…) 与 transition: d 0.8s ease 两条。

系列小结。path 微语言是值，basic-shape 是它的函数化，clip-path / shape-outside / offset-path / d 是四个消费者——一种「形状值类型」串起裁剪、环绕、轨道、形变四件事。