SVG中透明需用fill-opacity/stroke-opacity而非transparent或rgba；#RRGGBBAA兼容性差；opacity影响整元素且性能低；text等元素须显式设fill-opacity="0"。
SVG里不能直接用HTML的透明颜色名
HTML里写的 transparent 或 rgba(0,0,0,0) 在SVG中部分属性不生效——不是语法错，而是SVG渲染引擎对颜色解析逻辑和CSS不同。比如 fill="transparent" 在某些旧版浏览器或内联SVG中会被忽略，最终显示为黑色或默认色。
SVG填色/描边透明必须用fill-opacity和stroke-opacity
SVG原生支持两套透明控制：一是颜色值自带alpha（如 #ff000080），二是独立的不透明度属性。后者更可靠，尤其兼容IE11、Safari 12等老环境。
-
fill-opacity控制填充区域透明度（0～1），不影响描边 -
stroke-opacity控制描边透明度（0～1），不影响填充 - 二者可同时使用，叠加效果符合预期（例如
fill-opacity="0.5" stroke-opacity="0.3"） - 注意：它们不继承，子元素需单独设置
十六进制带alpha的写法（#RRGGBBAA）在SVG中可用但有坑
现代浏览器支持8位十六进制色（如 #0000ff80 表示半透蓝色），但存在两个关键限制：
- IE完全不支持
#RRGGBBAA，会直接当无效值回退到黑色 - 如果SVG是通过CSS设置
fill（比如style="fill: #0000ff80;"），部分Android WebView会解析失败 - 推荐优先用
fill="rgb(0,0,255)" fill-opacity="0.5"，兼容性最稳
<circle cx="50" cy="50" r="30" fill="rgb(255,0,0)" fill-opacity="0.4" />
用opacity属性要小心层级和性能
opacity 作用于整个元素（包括子元素、描边、阴影等），看似简单，但容易引发意外：
立即学习“前端免费学习笔记（深入）”；
- 若SVG内部有文字或嵌套
<g>，设opacity="0.3"会让所有内容一起变淡，无法单独调某部分 - 在大量动画场景下，
opacity触发重绘而非合成，比fill-opacity更耗性能 - 和CSS中的
opacity行为一致，但别和CSS opacity混用——内联SVG里CSS层叠可能覆盖掉你设的属性值
真正需要整体淡入淡出时再用 opacity，日常控色优先拆解为 fill-opacity/stroke-opacity。
<text> 元素设了 fill="transparent" 却没加 fill-opacity="0"，结果在iOS Safari上文字依然显形。透明不是“关掉”，而是“参与渲染但不可见”——得让渲染引擎明确知道你要它画什么、画多淡。 
