svg - 可以在 SVG 中创建(或伪造)二维渐变吗？

Question

我正在尝试创建一个颜色选择器，它必须动态生成其图像，并认为生成 SVG 比生成光栅图像要容易得多。不幸的是，我无法弄清楚如何表示将形成选择器核心的大二维梯度。

例如，如果当前选择的轴是蓝色和绿色，我需要绘制一个正方形，它的左下角为黑色，左上角为蓝色，右下角为绿色，右上角为青色。

如果有办法通过叠加两个 linearGradient 来实现这一点填充方块并使用它们的不透明度，我无法解决。我还尝试创建一个渐变，它的开始结束颜色是其他渐变(希望我很聪明)，但我得到的只是一个“大黑”。到目前为止，谷歌搜索让我一无所获。

我不想诉诸于一堆 256 个 1 像素的高梯度，这既是因为尺寸和复杂性的增加，也是因为我怀疑它不会很好地调整大小。也许对 SVG 有更多工作知识的人可以提出一些建议

Answer 1

这可以使用 mix-blend-mode样式属性:

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
  <defs>
    <linearGradient id="black-to-green" gradientTransform="rotate(0)">
      <stop offset="0"  stop-color="#000000" />
      <stop offset="100%" stop-color="#00ff00" />
    </linearGradient>
    <linearGradient id="black-to-blue" gradientTransform="rotate(90)">
      <stop offset="0"  stop-color="#0000ff" />
      <stop offset="100%" stop-color="#000000" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="256" height="256" fill="url('#black-to-green')" />
  <rect x="0" y="0" width="256" height="256" fill="url('#black-to-blue')" style="mix-blend-mode: screen" />
</svg>

文档: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode