fill属性控制svg图形内部填充的颜色、是否填充及透明度，仅对内联svg生效；外链svg（如img引入）不支持fill；fill可接受none、颜色值、渐变等，fill-opacity比rgba()更灵活且避免叠加陷阱。
fill 属性用来决定 SVG 图形内部区域的颜色，不是“加颜色”那么简单，而是控制是否填充、填什么色、填多透——它直接决定图形有没有“实心感”。
fill 不生效？先确认 SVG 是不是内联的
用 <img src="icon.svg"> 引入的 SVG，fill 完全无效；只有写在 HTML 里的内联 SVG（比如直接贴 <svg><circle fill="red"></circle></svg>）才支持 fill 控制。
- 外链 SVG（
<img>、<iframe></iframe>）无法被 CSS 或行内fill修改，这是最常踩的坑 - 如果 SVG 文件自身已带
fill="black"，它会覆盖外部 CSS 规则，除非你用!important或改用currentColor -
<object></object>加载时部分浏览器允许样式注入，但兼容性不稳定，不建议依赖
fill 支持哪些值？别只记 #RRGGBB
fill 接受多种颜色语法，但行为有差异：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
fill="none"和fill="transparent"效果一样，但语义不同：none明确表示“不绘制填充”，更推荐 -
fill="rgba(255,0,0,0.4)"中的 alpha 只影响填充，不影响描边（stroke） -
fill="#ff000080"是 8 位十六进制（#RRGGBBAA），同样只作用于填充区域 -
fill="url(#myGradient)"可引用 SVG 内部定义的渐变，此时不能再用rgba()，得靠fill-opacity或渐变里的stop-opacity
fill-opacity 比 rgba() 更灵活的三个场景
虽然 fill="rgba()" 看起来方便，但遇到复杂值时会失效或难维护：
- 配合渐变使用：一旦
fill是url(#grad)，rgba()就没法写了，只能用fill-opacity="0.3" - 与 CSS 变量联动：
fill: var(--primary-color)+fill-opacity: 0.6比硬编码 rgba 更易维护 - 避免 alpha 叠加陷阱：如果同时写了
fill="rgba(0,0,0,0.5)"和fill-opacity="0.4"，实际透明度是0.5 × 0.4 = 0.2，容易误判
fill 和 opacity 别混着用，它们作用域完全不同
fill 只管“里面那块颜色”，opacity 是把整个元素（包括描边、文字、子 <g></g>）一起压暗：
-
opacity="0.5"下，stroke和fill都变半透，且子元素会继承这个值（叠加后可能比预期更透明） -
fill-opacity="0.5"只让填充变淡，描边照常显示，子元素也不受影响 - 需要局部调透明度时，优先选
fill-opacity/stroke-opacity，全局淡出才用opacity
真正麻烦的是嵌套 SVG 或含 <text></text> 的复合图形——这时候 fill-opacity 和 opacity 的叠加逻辑容易让人晕，建议先画个简单矩形验证效果，再往上加层级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
