D3js SVG 重叠：具有许多随机形状的 SVG 的自定义颜色

Question

我需要完成图像中显示的颜色“混合”——对于有 2 个重叠形状的区域，它需要显示为特定颜色（此处为橙色），以及 3 个重叠的单独颜色（此处为红色） .

我需要一些非常动态且易于扩展到更多重叠形状的东西。可能有多达 20 个形状在各个区域重叠。形状是随机的，没有可预测的形式。

我正在使用 D3js 将形状绘制为 SVG 多边形。

我已经尝试过 css mix-blend-mode，但它对我的需求没有用。我已经研究了两天了，没有运气...

Answer 1

如果mix-blend-mode 不能满足您的需求（可能您不喜欢这些颜色或者您没有将isolation: isolate; 应用到该组），您可以尝试使用clipPath。

由于您不发布代码，因此我无法处理您的示例。接下来的代码可能会给你一些想法。

<svg xmlns="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>
<circle id="c" r="11.5" />
<use id="left" xlink:href="#c" x="-6"/>
<use id="right" xlink:href="#c" x="6"/>
<use id="circle" xlink:href="#c" y="10"/> 

<clipPath id="clip-left">
  <use xlink:href="#c" x="-6" />
</clipPath>
  
<clipPath id="clip-right">
  <use xlink:href="#c" x="+6" />
</clipPath> 
  
<clipPath id="clip-both" clip-path="url(#clip-left)">
<defs>a clipPath element can have a clip-path
applied to it.</defs>
<use xlink:href="#c" x="6" />
</clipPath> 
</defs>
  
<use xlink:href="#left" class="left" />
<use xlink:href="#right" class="right" />
<use xlink:href="#circle" class="circle" />

<g clip-path="url(#clip-left)">
<use xlink:href="#c" x="+6" fill="#e89f0c" />
</g>
<g clip-path="url(#clip-right)">
<use xlink:href="#c" x="0" y="10" fill="#e89f0c" />
</g> 
<g clip-path="url(#clip-left)">
<use xlink:href="#c" y="10" fill="yellow" />
</g> 
  
<g clip-path="url(#clip-both)">
<use xlink:href="#c" y="10" fill="red" />
</g>
  
    
<g class="outlines">
<use xlink:href="#left" />
<use xlink:href="#right" />
<use xlink:href="#circle" />
</g>
</svg>

上面的例子深受来自Using SVG with CSS3 and HTML5: Vector Graphics for Web Design的“clipPath”的启发