presentation attribute 优先级
SVG 里写的 fill="red" 看似是 HTML 属性，其实是一个 presentation attribute——它等价于一条特指度为 0 的样式，位于整条优先级链的最底层。所以任何一条普通 CSS 规则都能覆盖它。这正是「CSS × SVG」的核心：上色 / 描边属性几乎都同时是 XML 属性和 CSS 属性，优先级由 cascade 决定。
1 · 四层优先级阶梯
同一颗心，从底层往上逐个打开开关。当前生效层会高亮，颜色由 getComputedStyle 实测得出，而非预先写定：
| 来源 | 写法 | 特指度 / 优先级 |
|---|---|---|
| presentation attribute | <path fill="red"> |
最低 （相当于默认值） |
| 外部 / 内部 CSS 规则 | .icon { fill: blue } |
按选择器特指度 |
| inline style 属性 | style="fill: green" |
高于普通规则 |
| !important | .icon { fill: orange !important } |
最高 （压过 inline） |
2 · geometry property：连 cx / r / d 都成了 CSS 属性
历史上 cx/cy/r/x/y/width/d 这些几何属性只能写成 XML attribute、CSS 够不着。现代浏览器把它们升级成了真正的 CSS property——于是能 transition、能媒体查询、能 :hover 改。下面这个圆的 r 和 cx 完全由 CSS 过渡：
3 · currentColor 与 var()：主题化图标的两个关键工具
currentColor 是 custom property 出现之前就存在的「CSS 变量」：fill="currentColor" 会取宿主的 color。而 CSS var(--brand) 不仅能进入 SVG，还能穿透 <use> 的 shadow boundary——同一个 sprite 被
<use> 克隆多次，每个实例给不同的 --brand / color，即可得到不同主题。改下面的颜色试试：
实践要点： 图标换色不必为每种颜色导出一份 SVG。一份 sprite + fill="currentColor"（跟随文字色）或 fill="var(--brand)"（跟随主题变量）,<use> 处处克隆，颜色全部交给 cascade——这就是现代图标系统的常规做法。