SVG feComposite 标签

简介

该滤镜执行两个输入图像的智能像素组合;

属性

包含下面专有属性

属性 说明
in 标识输入的原语 (在上层)
in2 和in一样是第二个输入原语的标识 (在下层)
operator 操作符: over、in、out、atop、xor 和 arithmetic
k1~k4 只当 operator=”arithmetic” 生效,如果没有设置该属性,则默认是 0

arithmetic 操作对组合来自 <feDiffuseLighting> 滤镜和来自 <feSpecularLighting> 滤镜的输出以及组合纹理数据很有用;arithmetic 操作每个结果像素都要经过下面的方程式的计算:

$$
result = k1 \times i1 \times i2 + k2 \times i1 + k3 \times i2 + k4
$$

i1 和 i2 标示了输入图像相应的像素通道值,分别映射到 in 和 in2
k1、k2、k3 和 k4 则是它的属性。

实例

<svg version="1.1" height="200" width="800" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="noComposite">
            <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="Gau1"/>
        </filter>
        <filter id="compositeIn">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="Gau1"/>
            <feComposite in="Gau1" in2="SourceAlpha" operator="in" />
        </filter>
        <filter id="compositeXor">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="Gau1"/>
            <feComposite in="Gau1" in2="SourceAlpha" operator="xor" />
        </filter>
        <filter id="compositeAtop">
            <feGauassianBlur in="SourceGraphic" stdDeviation="5" result="Gau1"/>
            <feComposite in="Gau1" in2="SourceAlpha" operator="atop" />
        </filter>
        <filter id="compositeOver">
            <feGauassianBlur in="SourceGraphic" stdDeviation="5" result="Gau1"/>
            <feComposite in="Gau1" in2="SourceAlpha" operator="over" />
        </filter>
        <filter id="compositeOut">
            <feGauassianBlur in="SourceGraphic" stdDeviation="5" result="Gau1"/>
            <feComposite in="Gau1" in2="SourceAlpha" operator="out" />
        </filter>
        <filter id="compositeArithmetic">
            <feGauassianBlur in="SourceGraphic" stdDeviation="4" result="Gau1"/>
            <feComposite in="Gau1" in2="SourceAlpha" operator="arithmetic" k1="0.8" k2="-0.2" k3="0.5" k4="-0.4" />
        </filter>
    </defs>
    <circle cx="50" cy="60" r="40" fill="green" filter="url(#noComposite)"/>
    <circle cx="140" cy="60" r="40" fill="green" filter="url(#compositeIn)"/>
    <circle cx="230" cy="60" r="40" fill="green" filter="url(#compositeXor)"/>
    <circle cx="320" cy="60" r="40" fill="green" filter="url(#compositeAtop)"/>
    <circle cx="410" cy="60" r="40" fill="green" filter="url(#compositeOver)"/>
    <circle cx="500" cy="60" r="40" fill="green" filter="url(#compositeOut)"/>
    <circle cx="590" cy="60" r="40" fill="green" filter="url(#compositeArithmetic)"/>
    <text fill="green" x="10" y="120" font-size="8pt" font-weight="bold">No Composite</text>
    <text fill="green" x="130" y="120" font-size="8pt" font-weight="bold">In</text>
    <text fill="green" x="220" y="120" font-size="8pt" font-weight="bold">Xor</text>
    <text fill="green" x="305" y="120" font-size="8pt" font-weight="bold">Atop</text>
    <text fill="green" x="395" y="120" font-size="8pt" font-weight="bold">Over</text>
    <text fill="green" x="485" y="120" font-size="8pt" font-weight="bold">Out</text>
    <text fill="green" x="560" y="120" font-size="8pt" font-weight="bold">Arithmetic</text>
</svg>

效果:

留下评论

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