Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
12 replies
feanor

SVG - Fill the overlapping part of two <circle>'s.

I've created a SVG with two <circle>'s that are placed next to each other, with some part overlapping. I want to fill the overlapping part with a color. I'm trying to explore <filter> but short on time, would appreciate if someone could help me with it. 

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">

            <g filter="url(#overlap)">
                <circle class="circle" r="30%" cx="32%" cy="50%" fill="white" fill-opacity="0.05"   stroke="#8C0000" />
                <circle class="circle" r="30%" cx="68%" cy="50%" fill="white" fill-opacity="0.05" stroke="#8C0000" />
            </g>
</svg>
image.png
Was this page helpful?