#svg #heatmap #hsl
Вопрос:
Я пытаюсь создать своего рода «тепловую карту». Когда два элемента 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>
Комментарии:
1. возможно, поэкспериментируйте с developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode возможно, подойдет один из режимов.
Ответ №1:
В случае, если вам нужен пользовательский цвет для заливки, я бы использовал 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>