0

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>

8
  • please try this path instead of the shapes in the group: <path d="M50,30h75a20,20 0 0 1 0 40h-75a20,20 0 0 1 0 -40z"/>
    – enxaneta
    Mar 7, 2021 at 16:17
  • I take it the "fill-rule" attribute is not for this purpose?
    – Richard
    Mar 7, 2021 at 16:22
  • Alternatively you can use solid colors. For this you can use a rgba to rgb convertor like this one: borderleft.com/toolbox/rgba. In your example rgba(255,0,0,0.5) on a white background can be replaced with rgb(255,128,128)
    – enxaneta
    Mar 7, 2021 at 16:23
  • fill-rule is used when you have a path or a polygon to determine the insideness of a point. developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule
    – enxaneta
    Mar 7, 2021 at 16:25
  • I was worried that that was going to be said. It's not really a rect - that was just an example. The real shape is a bendy rectangle like this: rgraph.net/images/svg-activity-meter-snippet.png Still doable I guess, just a fair bit more code. Cheers.
    – Richard
    Mar 7, 2021 at 16:33

1 Answer 1

4

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

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

https://jsfiddle.net/qwydhvx0/

2
  • This might have saved me some time. :-/
    – Richard
    Mar 7, 2021 at 19:38
  • I just got around to trying this - and it works a treat. Cheers!
    – Richard
    Mar 20, 2021 at 21:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.