CSS变量不能用于SVG的HTML属性，必须通过CSS规则设置stroke；需显式声明transition才能实现颜色过渡；多色路径应使用独立class而非伪类；缩放时用vector-effect: non-scaling-stroke保持描边粗细，并添加fallback值避免默认黑色。
为什么stroke="var(--color)"在<path>里完全不生效
SVG的HTML属性值不解析CSS变量，stroke="var(--color)"会被浏览器当作无效字符串直接忽略，最终退到默认黑色或透明。这不是语法写错，而是机制限制——CSS自定义属性只能通过CSS规则作用于SVG元素，不能塞进HTML属性里。
常见错误现象：<path stroke="var(--stroke-color)">写了但颜色没变，检查开发者工具会发现stroke属性根本没被识别。
- 必须删掉所有
<path>上的stroke行内属性（包括stroke="#000"、stroke="none"） - 改用CSS选择器绑定，例如
.icon path { stroke: var(--stroke-color); } - 确保
--stroke-color在作用域内已定义，比如写在:root或父容器上
stroke颜色过渡必须显式声明transition
CSS中stroke不是可过渡的“默认属性”，不像color或opacity那样开箱即用。不加transition，改变量就是瞬变，看不到动画效果。
- 正确写法：
.icon path { transition: stroke 0.3s ease; stroke: var(--stroke-color); } - 错误写法：
.icon path { stroke: var(--stroke-color); }（无transition，颜色跳变） - 若同时控制
stroke-dashoffset，需额外加transition: stroke-dashoffset 0.4s, stroke 0.3s，不能只写transition: all
多色路径必须单独设class，不能依赖path:nth-child()
一个SVG里有多个<path>时，如果都用.icon path统一设stroke，它们颜色就全一样。想让描边A红、B蓝，就得给每个路径加独立class。
立即学习“前端免费学习笔记（深入）”；
- HTML中：
<path class="stroke-a" d="..."></path><path class="stroke-b" d="..."></path> - CSS中：
.stroke-a { stroke: var(--stroke-a, #ef4444); } .stroke-b { stroke: var(--stroke-b, #3b82f6); } - 避免用
path:nth-child(1)——导出工具加个<g>或注释就会让序号错乱
响应式缩放下stroke-width和stroke要分开处理
当SVG用width/height缩放时，stroke-width不会自动等比缩放（除非设vector-effect: non-scaling-stroke），但stroke颜色本身不受影响。容易误以为颜色“变淡”其实是描边变细导致视觉对比下降。
- 需要固定描边粗细：加
.icon path { vector-effect: non-scaling-stroke; } - 颜色变量仍走
stroke: var(--stroke-color)，无需额外单位或calc - 注意
vector-effect在IE/旧Safari中不支持，如需兼容，改用JS监听resize动态重设stroke-width
stroke会退成浏览器默认黑，图标突然变脏。加个fallback，比如stroke: var(--stroke-color, currentColor)，至少能兜住文字色。 
