D3js SVG Overlap: пользовательские цвета с множеством SVG произвольной формы

Question

Мне нужно выполнить «смешивание» цветов, показанное на изображении - для областей, где есть две перекрывающиеся фигуры, необходимо отобразить как определенный цвет (оранжевый здесь), и отдельный цвет для 3 перекрытий (красный здесь) ,

Мне нужно что-то очень динамичное и легко распространяющееся на более перекрывающиеся фигуры. Может быть до 20 фигур, которые перекрываются в разных областях. Формы случайные, без предсказуемой формы.

Я рисую фигуры в виде SVG-полигонов, используя D3js.

Я пробовал 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>

Приведенный выше пример во многом вдохновлен «отсечением клипа» из Использование SVG с CSS3 и HTML5: векторная графика для веб-дизайна