Angular项目中SVG填充重叠变暗？两种写法效果不一致原因求解

问题原因分析 #

这个差异和SVG的透明度渲染规则有关，和Angular本身没有关系：

• foo写法是给每个独立的圆形元素单独设置了带透明度的fill属性（比如rgba(255,0,0,0.1)）。SVG默认采用source-over的混合模式，多个半透明元素重叠时，重叠区域的透明度会逐层累加，所以视觉上会出现颜色加深的效果。
• bar写法的透明度作用层级和foo完全不同：你应该是把透明度设置在了所有圆形的共同父容器（比如<g>标签）上，或是把所有圆形合并成了单个路径后再设置半透明填充。这种情况下，SVG会先把所有圆形作为一个完全不透明的整体做内部渲染，再给整个整体统一应用透明度，圆形之间的重叠部分不会触发透明度叠加，自然就不会出现颜色加深的效果。

如果要让bar实现和foo一样的叠加效果，只需要把半透明设置从父容器/整体路径移到每个独立的圆形元素的fill属性上即可。

内容的提问来源于stack exchange，提问作者chris01