svg中fill仅控制填充区域透明度，opacity作用于整个元素及子元素；fill-opacity和stroke-opacity可独立调节填充与描边透明度，且支持与rgba叠加计算。
SVG的fill和opacity都能影响图形的“透明效果”，但作用机制完全不同：前者控制填充颜色本身的不透明度（仅作用于填充区域），后者控制整个元素（包括描边、填充、子元素）的整体可见度。
fill属性：只管填充色，支持RGBA与transparent
fill决定图形内部（如矩形、圆形、路径）的着色方式。它可接受颜色关键字、十六进制、RGB/RGBA函数等值。关键点在于：RGBA中的第四个参数（alpha）仅影响填充部分的透明度，不影响描边（stroke）。
-
fill="rgba(255,0,0,0.3)"→ 红色填充带30%不透明度，描边仍按自身stroke和stroke-opacity显示 -
fill="none"→ 完全无填充（等效于fill="transparent"，但语义更明确） -
fill="#ff000080"→ 8位十六进制写法（#RRGGBBAA），同样只作用于填充区域
opacity属性：全局透明，父子继承
opacity作用于整个SVG元素及其所有内容（填充、描边、文字、嵌套<g></g>或<svg></svg>）。取值范围是0（完全透明）到1（完全不透明），支持小数（如0.75）。
- 设置在
<rect opacity="0.5"></rect>上 → 整个矩形（含fill和stroke）半透明 - 设置在
<g opacity="0.4"></g>上 → 组内所有子元素叠加后整体呈现40%不透明度（注意：多重opacity会相乘，非简单叠加） - opacity会继承，子元素未显式声明时沿用父级值
fill-opacity 与 stroke-opacity：精细控制填充/描边独立透明度
当需要分别调节填充和描边的透明度，又不想影响整体结构时，优先使用fill-opacity和stroke-opacity。它们只作用于对应部分，且值域同opacity（0–1）。
-
fill-opacity="0.2" stroke-opacity="0.9"→ 填充很淡，描边几乎实色 - 与
fill="rgba(0,0,0,0.2)"效果一致，但fill-opacity更灵活：配合fill="url(#gradient)"等复杂值时仍可单独调透明度 - 若同时设置了
fill="rgba(...)"和fill-opacity，浏览器会将两者alpha值相乘（例如rgba(...,0.5) + fill-opacity="0.4" → 实际alpha=0.2）
实际应用建议：按需选择，避免嵌套冲突
多数情况下推荐组合使用：用fill/stroke定义颜色，用fill-opacity/stroke-opacity微调局部透明度，仅在需统一弱化整个图形（含动画、交互反馈）时才用opacity。
- 图标按钮悬停变淡？用
opacity最直接 - 渐变填充想保留高光细节？用
fill-opacity而非降低渐变内RGBA alpha - 多个重叠图形需分别控透明？避免对父
<g></g>设opacity，改用各子元素的fill-opacity
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
