4

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

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

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

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

4

1 回答 1

5

这可以使用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

于 2019-11-27T23:23:20.113 回答