← CSS 里的 Path:一条路径的四种用途 / d:连 SVG 的路径本体都成了 CSS 属性 待审核 7 / 7
d · SVG 形变

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

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

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

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

把鼠标放到圆上(触屏点一下)——:hover 里那条 d 是同结构的「歪 blob」:

3 · 三条规则

宿主只能是 SVG 的 <path> HTML 元素没有 d 属性——HTML 那边的对等能力是 clip-path / offset-path。值也只有两种:path("…")none

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

CSS 声明优先于 attribute。 markup 里的 d="…" 是 presentation attribute,特异性低于任何 CSS 规则——所以样式表里的 d: 声明总能覆盖它,这正是「切换主题 / 响应式替换图标」无需修改 markup 的原因。

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