D3js SVG重叠:具有许多随机形状的SVG的自定义颜色 [英] D3js SVG Overlap: Custom Colors with Many SVGs of random shape

问题描述

我需要完成图像中显示的颜色混合"-对于重叠2种形状的区域，它需要显示为特定颜色(此处为橙色)，而单独显示3种重叠的颜色(此处为红色) .

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 separate color for 3 overlap (red here).

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

I need something very dynamic and easy to extend to more overlapping shapes. There may be up to 20 shapes that overlap in various areas. Shapes are random, with no predictable form.

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

I am drawing the shapes as SVG polygons using D3js.

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

I have tried the css mix-blend-mode but it is not useful for my needs. I have been researching this for two days with no luck...

推荐答案

如果mix-blend-mode不能满足您的需要(也许您不喜欢颜色或未将isolation: isolate;应用于组)，则可以可以尝试使用clipPath.

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.

<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>

上面的示例在很大程度上受到了

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

这篇关于D3js SVG重叠:具有许多随机形状的SVG的自定义颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！