Search code examples
svgcolorsfill

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

In the example code shown below is there any way in SVG to have the fill only applied once to the whole shape/group?

Currently each individual shape is filled separately - so because the circles overlap the rect and the fill color is semi-opaque you get darker bits where the circles overlap the rect.

I tried using the fill-rule attribute set to evenodd but it didn't appear to have any effect.

 <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>

Solution

  • You can use solid colors, but make the <g> semi-opaque:

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

    https://jsfiddle.net/qwydhvx0/