在交点上减去 SVG HSL 颜色

Question

我正在尝试制作一种“热图”。当两个具有颜色和不透明度的 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>

Answer 1

如果您需要自定义填充颜色，我会使用 clipPath。您可以重复使用被第二个形状剪裁的第一个形状。

请注意，两个形状都在 <defs> 中，没有 fill 或 oppacity。然后，您将这些形状与具有所需 fill.

的 <use> 元素一起使用

您还使用其中一种形状来创建 <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>

在交点上减去 SVG HSL 颜色

Substract SVG HSLA colours on intersection

hsl

svg

heatmap