attr ↔ CSS · 枢纽 ★

presentation attribute 优先级

SVG 里写的 fill="red" 看似是 HTML 属性，实为一个 presentation attribute——它等价于一条特指度为 0 的样式，位于整条优先级链的最底层，所以任何一条普通 CSS 规则都能覆盖它。这正是「CSS 驱动 SVG」的核心：上色与描边属性几乎都同时是 XML 属性和 CSS 属性，优先级由 cascade 决定。

1 · 四层优先级阶梯

图 1-1 · 同一颗心，从底层往上逐个打开开关。当前生效层会高亮，颜色由 getComputedStyle 实测得出，而非预先写定。

表 1-1 · 四种来源的优先级排序。
来源	写法	特指度 / 优先级
presentation attribute	`<path fill="red">`	最低（相当于默认值）
外部 / 内部 CSS 规则	`.icon { fill: blue }`	按选择器特指度
inline style 属性	`style="fill: green"`	高于普通规则
important 声明	`.icon { fill: orange !important }`	最高（压过 inline）

2 · geometry property

历史上 cx、cy、r、x、y、width、d 这些几何属性只能写成 XML attribute，CSS 够不着。现代浏览器把它们升级成了真正的 CSS property，于是能 transition、能媒体查询、能在 :hover 里改。

图 2-1 · 一个圆的 r 与 cx 完全由 CSS 过渡驱动。可 hover 观察几何属性的补间。

3 · currentColor 与 var()

currentColor 是 custom property 出现之前就存在的「CSS 变量」：fill="currentColor" 会取宿主的 color。而 CSS var(--brand) 不仅能进入 SVG，还能穿透 <use> 的 shadow boundary——同一个 sprite 被 <use> 克隆多次，每个实例给不同的 --brand 或 color，即可得到不同主题。

图 3-1 · 可改颜色，看同一份 sprite 的多个 use 实例各自跟随不同的变量取色。

建议 · 图标换色不必为每种颜色导出一份 SVG。一份 sprite 配 fill="currentColor"（跟随文字色）或 fill="var(--brand)"（跟随主题变量），<use> 处处克隆，颜色全部交给 cascade——这就是现代图标系统的常规做法。