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

Question

我需要将一个 filter 作为 gradient map 应用到 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 之间的其他值来控制该行为。