您能否在 SVG 中 "group" 形状，使每个形状只填充一次 - 即使它们重叠？

Question

在下面显示的示例代码中，SVG 中是否有任何方法可以将填充仅应用于整个 shape/group？

目前每个单独的形状都是单独填充的 - 因为圆圈与矩形重叠并且填充颜色是半透明的，所以在圆圈与矩形重叠的地方会出现较暗的位。

我尝试使用设置为 evenodd 的 fill-rule 属性，但它似乎没有任何效果。

 <html>
    <body>

    <svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
    
        <g fill="rgba(255,0,0,0.5)">
            <circle cx="50" cy="50" r="20"></circle>
            <rect x="50" y="30" height="40" width="75" />
            <circle cx="125" cy="50" r="20"></circle>
        </g>
    </svg>

    </body>
    </html>

Answer 1

您可以使用纯色，但要使 <g> 半透明：

<g fill="rgba(255,0,0)" opacity=".5">

https://jsfiddle.net/qwydhvx0/

您能否在 SVG 中 "group" 形状，使每个形状只填充一次 - 即使它们重叠？

Can you "group" shapes in SVG so each is filled only once - even if they overlap?

svg

colors

fill