d:连 SVG 的路径本体都成了 CSS 属性
SVG 元素上的 fill、stroke 这些 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 是四个消费者——一种「形状值类型」串起裁剪、环绕、轨道、形变四件事。