SVG feComponentTransfer元素

SVG中的元素用于定义颜色或透明度通道的转换函数。它可以用于创建各种效果，如反相、颜色调整、锐化等。

基本语法

<filter id="filter-id">
  <feComponentTransfer>
    <!-- 定义转换函数 -->
  </feComponentTransfer>
</filter>

转换函数

元素中可以定义多个子元素，用于定义不同的转换函数，比如feFuncR、feFuncG、feFuncB和feFuncA等。

<filter id="filter-id">
  <feComponentTransfer>
    <feFuncR type="linear" slope="1" intercept="0"/>
    <feFuncG type="linear" slope="1" intercept="0"/>
    <feFuncB type="linear" slope="1" intercept="0"/>
  </feComponentTransfer>
</filter>

其中，type属性用于指定转换函数的类型，可以是线性的（linear）、指数的（gamma）、阶梯的（table）等。slope和intercept属性用于指定线性转换函数的斜率和截距。

示例

下面是一个简单的示例，演示如何使用元素创建反相效果：

<svg width="200" height="200">
  <defs>
    <filter id="invert">
      <feComponentTransfer>
        <feFuncR type="table" tableValues="1 0"/>
        <feFuncG type="table" tableValues="1 0"/>
        <feFuncB type="table" tableValues="1 0"/>
      </feComponentTransfer>
    </filter>
  </defs>

  <rect x="50" y="50" width="100" height="100" fill="#F00" filter="url(#invert)"/>
</svg>

效果如下：

参考链接

• MDN Web Docs - feComponentTransfer