HTML5中SVG的Fill填充属性与Opacity透明度控制

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>或<svg>）。取值范围是0（完全透明）到1（完全不透明），支持小数（如0.75）。

• 设置在<rect opacity="0.5">上 → 整个矩形（含fill和stroke）半透明
• 设置在<g opacity="0.4">上 → 组内所有子元素叠加后整体呈现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>设opacity，改用各子元素的fill-opacity