fill默认值为black而非transparent，漏写易致意外黑块；fill="none"语义明确且兼容性好，rgba与fill-opacity混用会触发alpha相乘导致透明度异常。
fill 属性直接决定 SVG 图形内部的着色，不是“可有可无”的装饰项——没设 fill 时多数浏览器会默认填黑色，容易造成意料外的视觉干扰。
fill 值不写就是黑色，写 none 才真透明
很多新手在画图标或路径时发现图形“莫名变黑”，其实只是漏写了 fill。SVG 规范规定：fill 缺省值是 black，不是 transparent。
-
fill="none"→ 完全无填充（推荐用于只需描边的场景） -
fill="transparent"→ 语义上是“透明色”，但部分旧引擎渲染行为不一致，不如none可靠 -
fill=""（空字符串）→ 等效于未声明，仍按black渲染
RGBA 写法 vs fill-opacity：别混用，否则 alpha 叠加出错
想让红色填充半透，看似两种写法都行：fill="rgba(255,0,0,0.5)" 或 fill="red" fill-opacity="0.5"。但它们底层逻辑不同，混用会触发乘法叠加：
-
fill="rgba(255,0,0,0.6)" fill-opacity="0.5"→ 实际 alpha = 0.6 × 0.5 = 0.3 - 渐变或图案填充（
fill="url(#grad)"）不支持 RGBA，此时必须用fill-opacity控制透明度 - 若需分别调填充和描边透明度，优先用
fill-opacity和stroke-opacity，而非全局opacity
fill-rule 影响复杂路径是否被填充，不是颜色问题
当你画了一个自相交的星形或嵌套路径，却发现中间“漏了色”或“多填了一块”，大概率是 fill-rule 在起作用，和 fill 颜色本身无关。
-
fill-rule="nonzero"（默认）→ 按路径方向积分判断内外，适合手绘路径控制 -
fill-rule="evenodd"→ 简单数交点奇偶性，对对称图形更直观 - 该属性只对
<path></path>、<polygon></polygon>等由路径定义的图形生效，<circle></circle>、<rect></rect>不受影响
真正容易被忽略的是：fill 的值一旦是 url()（比如图案或渐变），就无法再用 RGBA 修改其 alpha；此时唯一可控的入口只剩 fill-opacity。这点在动画或主题切换时特别关键——别等调试半天才发现透明度根本没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
