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.
8 Replies
you can fake it, but you need to convert this to a 300x150 image (by using a viewbox) and this path:
<path d="M150.0019 28.707A71.1513 71.1513 0 00150 121.293 71.1513 71.1513 0 00150.0019 28.707Z" />
by the way, your svg is very sub-optimal
^ this is a group, and you have repeated properties
you should have something like this:
the problem is, the SVG is supposed to be responsive, it should resize between 1024px and 1920px. I guess I need to explore
<path>. I was wondering if there is some kinda filter/mask to achieve it.so?
thank you for improving the code, I didn't know attributes could inherit like that, first day with SVGs.
if you don't have an absolute system, you're going to be in trouble to do some things
im not saying this is a perfect solution, by the way
you're welcome. that's what a group does
Found something on stackoverflow using ComponentTransfer. The last entry marked green.
https://stackoverflow.com/questions/38751756/what-is-the-best-approach-for-overlapping-svg-elements-area-fill
that's a much better method
thank you so much, looking into it.