可以在 SVG 中创建（或伪造）二维渐变吗？

Question

我正在尝试创建一个必须动态生成图像的颜色选择器，并认为生成 SVG 比生成光栅图像要容易得多。不幸的是，我不知道如何表示将形成选择器中心的大二维渐变。

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

如果有一种方法可以通过叠加两个linearGradient填充的方块并调整它们的不透明度来实现这一点，我无法解决。我还尝试创建一个渐变，其起始结束颜色是其他渐变（希望我很聪明），但给我带来的只是“大黑无”。到目前为止，谷歌搜索一无所获。

我不想诉诸 256 个 1 像素高渐变的堆栈，这既是因为尺寸和复杂性的增加，也是因为我怀疑它不能很好地调整大小。也许对 SVG 有更多了解的人可以提出一些建议

Answer 1

这可以使用mix-blend-modestyle 属性来实现：

<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