我正在学习 SVG。到目前为止,它一直很棒,但现在我坚持使用表值进行颜色传输。下面是一个例子:
<feFuncR type="table" tableValues="1 0 0 0"></feFuncR>
Run Code Online (Sandbox Code Playgroud)
此功能将红色实心条更改为黑色。我想知道tableValues属性是如何工作的,以便我可以自己弄清楚颜色的变化。我找不到任何详细解释它的文章。
如何feComponentTransfer作品中描述的SVG规范。
如何 type="table"作品是你提供的N值描述N-1的内插区域的列表。这些成为各种插值点的输出值(V0 到 V3)。
你的表是“1 0 0 0”。这是指定 3 个插值区域的开始和结束插值的 4 个值。
输入值 0 -> 0.33 映射到输出值 V0 -> V1 (1 -> 0)。
输入值 0.33 -> 0.66 映射到输出值 V1 -> V2 (0 -> 0)。
输入值 0.66 -> 1.00 映射到输出值 V2 -> V3 (0 -> 0)。
因此,红色的输入值 1,即您所说的您正在使用的,将映射到 0。这就是您的红色元素变成黑色的原因。
输入值 0 将映射到 1。输入值 0.33 将映射到 0。输入值 0.2 将映射到:
Vk + (C - k/n)*n * (Vk+1 - Vk)
1 + (0.2 - (0/3)) * 3 * (0 - 1) = 0.4
Run Code Online (Sandbox Code Playgroud)
其中 Vk 是第一个表值 (1),Vk+1 是第二个表值 (0)。这是因为 0.2 位于第一个区域(介于 0 和 0.33 之间)。
这是一个图表,显示输入如何映射到输出。
Vk + (C - k/n)*n * (Vk+1 - Vk)
1 + (0.2 - (0/3)) * 3 * (0 - 1) = 0.4
Run Code Online (Sandbox Code Playgroud)