Question

我正在学习SVG。到目前为止它一直很好，但现在我仍然坚持使用表值进行颜色转移。这是一个例子：

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

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

Answer 1

the SVG specification中描述了feComponentTransfer的工作原理。

type="table"的工作原理是您提供描述N-1个插值区域的N个值列表。它们成为各种插值点的输出值（V0到V3）。

你的桌子是＆＃34; 1 0 0 0＆＃34;。这4个值指定了3个插值区域的开始和结束插值。

输入值0 - ＆gt; 0.33被映射到输出值V0-> 0。 V1（1 - > 0）输入值0.33 - > 0.66被映射到输出值V1-> 0。 V2（0 - > 0）。
输入值0.66 - ＆gt;将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之间）。

这是一个图表，显示输入如何映射到输出。

＆＃13;

<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>

＆＃13;

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

1 个答案: