SVG feComponentTransfer 标签

简介

通过子元素 <feFuncR>、<feFuncG>、<feFuncB> 和 <feFuncA> 为红色、绿色、蓝色与透明度四个通道每个像素点颜色的转换,包括亮度调节,对比度调节,色彩平衡或阈值等操作。转换公式:
$$
\begin{align}
& R’ = feFuncR(R) \\
& G’ = feFuncG(G) \\
& B’ = feFuncB(B) \\
& A’ = feFuncA(A) \\
\end{align}
$$

属性

<feFuncR>、<feFuncG>、<feFuncB> 和 <feFuncA> 有如下专有属性:

属性 说明
type 每一个通道下数值处理的方法类型,参数值 identity、table,discrete 和 linear,详细看下面介绍
tableValues 当 type=”table” 时候会用到这个属性,由一串数字组成,v0,v1,…vn, 通过逗号或者空格分开,如 tableValues=”0.1 0.4 0.5 0.2 … 0.5″,如果没有设置 tableValues 属性,则 type=”table” 不生效,默认是 identity
slope 当 type=”linear” 时,线性函数的斜率。如果没有指定该属性,则默认值是 1
intercept 当 type=”linear” 时,线性函数的截距,如果没有指定该属性,则默认值是 0
amplitude 当输入=”gamma”时,伽马函数的幅度,如果没有指定该属性,则默认值是 0
exponent 当输入=”gamma”时,伽马函数的指数,如果没有指定该属性,则默认值是 1
offset 当输入=”gamma”时,伽马函数的偏移量,如果没有指定该属性,则默认值是 0

type 属性每个颜色通道处理方式根据下面公式处理,首先明确 feFuncR() ~ feFuncA() 函数的输出范围是 [0,1];

  • identity: 颜色值不变化;根据公式 $ C’= C $ 计算得到。
  • table:定义线性插值;根据 tableValues 格式给出具有从 $v_0 至 v_n$ 共 n+1 个值,用于指定n个均匀大小的插值区域,公式如下:当 C < 1 时, 通过下面公式找到 k 值
    $$
    k/n <= C < (k+1) / n
    $$
    然后 C’ 通过下面公式得到
    $$
    C’ = v_k + (C – k/n) \times n \times (v_k + 1 – v_k)
    $$
    当 C = 1 时
    $$ C’ = v_n $$

  • discrete :定义阶梯函数,根据 tableValues 格式给出的值,它提供了 n 个值(即 $ v_0 到 v_n – 1 $)的列表组成的阶梯函数,公式定义: C < 1 时, 通过下面公式找到 k 值
    $$
    k/n <= C < (k+1) / n
    $$
    然后 C’ 通过下面公式得到
    $$
    C’ = v_k
    $$
    当 C = 1 时
    $$ C’ = v_n-1
    $$

  • linear :线性方式转换颜色数值;包含:slope 和 intercept 两个值,公式定义:
    $$
    C’ = slope \times C + intercept
    $$

  • gamma:使用 gamma 函数进行颜色数值处理,公式定义:
    $$
    C’ = amplitude \times pow(C, exponent) + offset
    $$

实例

<svg version="1.1" height="200" width="800" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="linearGradient" gradientUnits="userSpaceOnUse" x1="200" y1="0" x2="600" y2="0">
             <stop offset="0" stop-color="#000000" />
             <stop offset=".33" stop-color="#aa0000" />
             <stop offset=".67" stop-color="#bb0000"/>
             <stop offset="1" stop-color="#ff0000" />
        </linearGradient>
        <filter id="Identity">
            <feComponentTransfer>
                <feFuncR type="identity"/>
                <feFuncG type="identity"/>
                <feFuncB type="identity"/>
                <feFuncA type="identity"/>
            </feComponentTransfer>
        </filter>
        <filter id="Table">
            <feComponentTransfer>
                <feFuncR type="table" tableValues="0 0 1 1"/>
                <feFuncG type="table" tableValues="1 1 0 0"/>
                <feFuncB type="table" tableValues="0 1 1 0"/>
            </feComponentTransfer>
        </filter>
        <filter id="Linear">
            <feComponentTransfer>
                <feFuncR type="linear" slope="1" intercept=".25"/>
                <feFuncG type="linear" slope=".5" intercept="0.5"/>
                <feFuncB type="linear" slope=".5" intercept=".5"/>
            </feComponentTransfer>
        </filter>
        <filter id="Gamma">
            <feComponentTransfer>
                <feFuncR type="gamma" amplitude="2" exponent="5" offset="0.1"/>
                <feFuncG type="gamma" amplitude="2" exponent="3" offset="0.1"/>
                <feFuncB type="gamma" amplitude="2" exponent="1" offset="0.1"/>
            </feComponentTransfer>
        </filter>
    </defs>
    <g fill="url(#linearGradient)" font-size="8pt" font-weight="bold">
       <rect x="100" y="10" width="600" height="20" />
       <rect x="100" y="50" width="600" height="20" filter="url(#Table)"/>
        <rect x="100" y="90" width="600" height="20" filter="url(#Linear)"/>
        <rect x="100" y="130" width="600" height="20" filter="url(#Gamma)"/>
        <rect x="100" y="170" width="600" height="20" filter="url(#Identity)"/>
        <text fill="green" x="70" y="25">原图</text>
        <text fill="green" x="60" y="65">Table</text>
        <text fill="green" x="60" y="100">Linear</text>
        <text fill="green" x="50" y="140">Gamma</text>
        <text fill="green" x="50" y="180">Identity</text>
    </g>
</svg>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注