stroke-width生效需同时满足：SVG为内联形式、目标元素设了stroke色，且外部CSS设置时不能有内联stroke-width覆盖；其值为SVG坐标单位，受viewBox和缩放影响，固定视觉粗细需用vector-effect="non-scaling-stroke"。
stroke-width 属性必须写在 SVG 元素内部或内联样式里
直接在外部 CSS 里用 .icon { stroke-width: 2; } 失效，除非 SVG 是内联（即 <svg><path></path></svg> 形式嵌入 HTML），且目标元素（如 <path></path>、<circle></circle>）本身有 stroke 值。没有描边颜色，stroke-width 再大也看不见。
- ✅ 正确：给
<path></path>加stroke="black" stroke-width="3" - ✅ 正确：用内联样式
style="stroke: #333; stroke-width: 1.5;" - ❌ 错误：只写
stroke-width: 2但没设stroke，描边完全不显示 - ⚠️ 注意：
stroke-width默认单位是 px，不支持 rem/em，也不能用百分比
用 CSS 设置 stroke-width 需满足两个前提条件
想用外部或 <style></style> 块统一控制 SVG 描边粗细，得同时满足：
- SVG 必须是内联写法（不能是
<img src="x.svg" alt="CSS如何设置SVG的描边粗细_利用stroke-width调整样式" >或 background-image） - 目标图形元素（如
<path></path>、<rect></rect>）不能带内联stroke-width，否则会覆盖 CSS 规则（层叠优先级更高） - 推荐写法：
svg .border { stroke: currentColor; stroke-width: 1.2; }，再给 SVG 加 class 或用currentColor继承文字色
stroke-width 数值不是“像素”而是 SVG 坐标系单位
这个值受 viewBox 和缩放影响。比如 viewBox="0 0 100 100" 下设 stroke-width="2"，实际渲染粗细会随容器尺寸变化——它本质是“坐标单位”，不是固定物理像素。
- 放大 SVG 容器时，描边会跟着变粗（非等比缩放下尤其明显）
- 需要固定视觉粗细？加
vector-effect="non-scaling-stroke"，但注意兼容性：IE 不支持，Safari 旧版本有 bug -
stroke-width支持小数（如0.8），但低于 ~0.5px 在高 DPI 屏上可能被抗锯齿吞掉，看起来像没描边
React/Vue 等框架中动态改 stroke-width 的坑
JS 动态设置时别直接操作 style.strokeWidth，容易被 React 的驼峰规则或 Vue 的响应式系统忽略。
立即学习“前端免费学习笔记（深入）”；
- ✅ React 中用
strokeWidth={hovered ? 3 : 1}（注意是驼峰，不是 kebab） - ✅ Vue 模板里写
:stroke-width="isActive ? '2' : '1'，记得加引号，因为属性名含短横线 - ❌ 直接
el.style.strokeWidth = '2'可能失效，尤其是元素由框架管理生命周期时 - ⚠️ 修改后若没重绘，检查是否触发了
transform或will-change，某些浏览器对 non-scaling-stroke + transform 组合渲染异常
stroke、是不是内联 SVG、以及 viewBox 和缩放是否悄悄改了它的实际表现。 
