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

【问题标题】：Can a two-dimensional gradient be created (or faked) in SVG?可以在 SVG 中创建（或伪造）二维渐变吗？
【发布时间】：2010-09-27 18:08:35
【问题描述】：

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

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

如果有办法通过覆盖两个linearGradient 填充的正方形并使用它们的不透明度来实现这一点，我无法解决。我还尝试创建一个渐变，其起点和终点颜色是其他渐变（希望我很聪明），但我得到的只是“大黑什么都没有”。到目前为止，Google 搜索让我一无所获。

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

【问题讨论】：

你最好使用画布。

标签： svg gradient

【解决方案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

【讨论】：

效果很好！希望采用率有所提高。