Блог

Я пытаюсь создать своего рода «тепловую карту». Когда два элемента svg с цветом и непрозрачностью пересекаются, они становятся темнее или неожиданным цветом на пересечении, я хотел бы вычесть эти цвета в масштабе HSLA, поэтому, например, если бы у меня был зеленый эллипс и желтый эллипс, пересечение, вероятно, было бы оранжевым или близким к красному, думайте об этом как о своего рода тепловой карте, которая, когда два цвета пересекаются, они становятся горячее.

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
    <ellipse cx="200" cy="200" rx="100" ry="100" id="ellipse1" fill="yellow" fill-opacity="0.5" />
    <ellipse cx="250" cy="200" rx="100" ry="100" id="ellipse2" fill="green" fill-opacity="0.5" />
</svg>
 

В случае, если вам нужен пользовательский цвет для заливки, я бы использовал clipPath . Вы можете повторно использовать первую фигуру, обрезанную второй фигурой.

Пожалуйста, обратите внимание, что обе фигуры находятся в поле <defs> без fill или oppacity . Затем вы используете эти фигуры с <use> элементом с желаемым fill .

Вы также используете одну из этих фигур для создания <clipPath> .

Наконец, вы даете обрезанному контуру желаемую заливку, прозрачность и т. Д…

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <defs>
    <ellipse cx="200" cy="200" rx="100" ry="100" id="ellipse1" />
    <ellipse cx="250" cy="200" rx="100" ry="100" id="ellipse2" fill="green" fill-opacity="0.5" />
    <clipPath id="clip">
      <use xlink:href="#ellipse2" />
    </clipPath>
  </defs>
  <use xlink:href="#ellipse1" fill="yellow" fill-opacity="0.5" />
  <use xlink:href="#ellipse2" fill="green" fill-opacity="0.5" />
  <use xlink:href="#ellipse1" clip-path="url(#clip)" fill="red" />
</svg>