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

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

1 个答案: