D3js Svg Overlap: Custom Colors With Many Svgs Of Random Shape

I need to accomplish the color 'blending' shown in the image -- for areas where there are 2 shapes overlapping it needs to display as a particular color (orange here), and a separa

Solution 1:

if mix-blend-mode is not useful for your needs ( maybe you don't like the colors or you didn't applied isolation: isolate; to the group ) you may try using clipPath.

Since you don't publish your code I can't work on your example. The code that comes next may give you some ideas.

<svgxmlns="http://www.w3.org/2000/svg"xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"height="360px"width="360px"viewBox="-18 -12.5 36 36"><title>Venn Diagram</title><style>.left { fill: #1dd0b8; }
.right { fill: #47ef96; }
.circle{ fill: #b147ef; }
.outlines {
fill: none;
stroke: black;
}
</style><defs><circleid="c"r="11.5" /><useid="left"xlink:href="#c"x="-6"/><useid="right"xlink:href="#c"x="6"/><useid="circle"xlink:href="#c"y="10"/><clipPathid="clip-left"><usexlink:href="#c"x="-6" /></clipPath><clipPathid="clip-right"><usexlink:href="#c"x="+6" /></clipPath><clipPathid="clip-both"clip-path="url(#clip-left)"><defs>a clipPath element can have a clip-path
applied to it.</defs><usexlink:href="#c"x="6" /></clipPath></defs><usexlink:href="#left"class="left" /><usexlink:href="#right"class="right" /><usexlink:href="#circle"class="circle" /><gclip-path="url(#clip-left)"><usexlink:href="#c"x="+6"fill="#e89f0c" /></g><gclip-path="url(#clip-right)"><usexlink:href="#c"x="0"y="10"fill="#e89f0c" /></g><gclip-path="url(#clip-left)"><usexlink:href="#c"y="10"fill="yellow" /></g><gclip-path="url(#clip-both)"><usexlink:href="#c"y="10"fill="red" /></g><gclass="outlines"><usexlink:href="#left" /><usexlink:href="#right" /><usexlink:href="#circle" /></g></svg>

The example above is heavily inspired by "clipping a clipPath" from Using SVG with CSS3 and HTML5: Vector Graphics for Web Design