我可以为 [tableValues] 上的每个值设置特定间距吗？

Question

我需要将filter 作为 渐变映射 应用到 HTML 元素，并使用自定义渐变和每个颜色值之间的特定距离。

---

将我所做的和我想做的事情放到图像中。

假设我们有一张黑白图像。
通过一些 css，我们使用下面的 filter 将黑色/白色映射到红色/绿色/蓝色。

<filter id="rgb_gradient">
  <feComponentTransfer>
    <feFuncR type="table" tableValues="1 0 0"/>
    <feFuncG type="table" tableValues="0 1 0"/>
    <feFuncB type="table" tableValues="0 0 1"/>
    <feFuncA type="table" tableValues="0 1"/>
  </feComponentTransfer>
</filter>

点 A 到 B 将如下所示：

目前，所有三种颜色将均匀分布（红色为 0%，绿色为 50%，蓝色为 100%）。

---

那么，回到问题...

我可以设置/移动（例如）从 50% 到 82% 的绿色值吗？

我们应该期待什么：

提前致谢。

Answer 1

你绝对可以做到。但是，实现您想要的粒度可能会很痛苦。

首先，我想看看你在做什么。对于每个组件，您要设置三个断点。插值平均划分[0,1] 输入区域，因此您设置三个区域：0-0.33、0.34-0.66 和0.67-1（请忽略四舍五入）。您将红色坐标映射到暗像素，因为 feFuncR 的第一个值是 1，feFuncG 和 feFuncB 的第一个值是零。同样重要的是要注意，在每个区域中，您都会在开始和结束之间获得插值。这就是为什么您会在红色和绿色之间看到黄色像素，因为红色会褪色，绿色会变亮。

因此，您可以使用相同的技巧和更多的断点来获得进一步的控制。问题是算法会控制实际的偏移量，所以如果你想得到 1% 的误差，你可能需要设置很多断点。例如，这个例子会给你红色从 0 到 0.4，绿色从 0.4 到 0.8，蓝色从 0.8 到 1：

<filter id="disp" x="0" y="0" width="100%" height="100%">
  <feComponentTransfer>
    <feFuncR type="table" tableValues="1 1 0 0 0"/>
    <feFuncG type="table" tableValues="0 0 1 1 0"/>
    <feFuncB type="table" tableValues="0 0 0 0 1"/>
    <feFuncA type="table" tableValues="0 1"/>
  </feComponentTransfer>
</filter>

如您所见，您会丢失暗像素中的细节，因为值从 0 到 0.4 的每个像素都是完全红色的。您可以在偏移量中使用介于 0 和 1 之间的其他值来控制该行为。