如何在tableValues中使用feComponentTransfer类型的“表”

Question

我正在学习SVG。到目前为止，它是伟大的，但现在我坚持使用表值的颜色转移。下面是一个示例：

<feFuncR type="table" tableValues="1 0 0 0"></feFuncR>

此功能将实心的红色条形改为黑色。我想知道tableValues属性是如何工作的，这样我就可以自己判断颜色的变化了。我找不到一篇详细解释它的文章。

Answer 1

feComponentTransfer是如何工作的，用SVG规范描述。

type="table"的工作原理是提供描述N1插值区域的N个值的列表.这些值成为不同插值点上的输出值(V0到V3)。

你的桌子是“10 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

其中Vk是第一个表值(1)，Vk+1是第二个表值(0)。这是因为0.2位于第一个区域(0到0.33之间)。

这里有一个图表来显示输入映射到输出的方式。

​

<svg width="500" height="300"
     font-family="sans-serif" font-size="16" text-anchor="middle">
  <g fill="none" stroke="lightgray" stroke-width="2">
    <line x1="100" y1="40" x2="100" y2="160"/>
    <line x1="90" y1="150" x2="410" y2="150"/>
    <line x1="90" y1="50" x2="100" y2="50"/>
    <line x1="200" y1="150" x2="200" y2="160"/>
    <line x1="300" y1="150" x2="300" y2="160"/>
    <line x1="400" y1="150" x2="400" y2="160"/>
  </g>
  <g fill="lightgray">
    <text x="50" y="100">Output</text>
    <text x="250" y="195">Input</text>
    <text x="80" y="55">1</text>
    <text x="80" y="155">0</text>
    <text x="100" y="175">0</text>
    <text x="200" y="175">0.33</text>
    <text x="300" y="175">0.66</text>
    <text x="400" y="175">1</text>
    <text x="50" y="245">Input</text>
    <text x="50" y="275">Output</text>
  </g>
  <g fill="black">
    <text x="100" y="30">1</text>
    <text x="200" y="30">0</text>
    <text x="300" y="30">0</text>
    <text x="400" y="30">0</text>
  </g>
  <polyline fill="none" stroke="black" stroke-width="4"
            points="100,50, 200,150, 300,150, 400,150"/>

  <!-- filter a graduated rectangle to show ouput values -->
  <rect x="100" y="230" width="300" height="20" fill="url(#red-gradient"/>
  <rect x="100" y="260" width="300" height="20" fill="url(#red-gradient"
         filter="url(#example)"/>
  
  <linearGradient id="red-gradient">
    <stop offset="0" stop-color="rgb(0,0,0)"/>
    <stop offset="1" stop-color="rgb(255,0,0)"/>
  </linearGradient>

  <filter id="example" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="1 0 0 0"/>
    </feComponentTransfer>
  </filter>
</svg>

​