SVG feBlend 标签

简介

通过特定的混合模式组合两个对象。

属性 说明
in 标识输入的原语 (在上层)
in2 和in一样是第二个输入原语的标识 (在下层)
mode 模式值分别:normal、multiply、screen、darken 和 lighten

实例

<svg version="1.1" height="200" width="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="feBlendMultiply">
          <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/>
          <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>
      </filter>
        <filter id="feBlendOpacityHalf">
            <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="0.5"/>
            <feBlend in="SourceGraphic" in2="floodFill" mode="normal"/>
        </filter>
        <filter id="feBlendNormal">
            <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/>
            <feBlend in="SourceGraphic" in2="floodFill" mode="normal"/>
        </filter>
        <filter id="feBlendScreen">
            <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/>
            <feBlend in="SourceGraphic" in2="floodFill" mode="screen"/>
        </filter>
        <filter id="feBlendDarken">
            <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/>
            <feBlend in="SourceGraphic" in2="floodFill" mode="darken"/>
        </filter>
        <filter id="feBlendLighten">
            <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/>
            <feBlend in="SourceGraphic" in2="floodFill" mode="lighten"/>
        </filter>
    </defs>
    <image xlink:href="https://s.tinyx.cc/images/common/avatar.png" x="20" y="20" width="50" height="50" style="filter:url(#feBlendNormal);"/>
    <image xlink:href="https://s.tinyx.cc/images/common/avatar.png" x="90" y="20" width="50" height="50" style="filter:url(#feBlendMultiply);"/>
    <image xlink:href="https://s.tinyx.cc/images/common/avatar.png" x="160" y="20" width="50" height="50" style="filter:url(#feBlendScreen);"/>
    <image xlink:href="https://s.tinyx.cc/images/common/avatar.png" x="230" y="20" width="50" height="50" style="filter:url(#feBlendDarken);"/>
    <image xlink:href="https://s.tinyx.cc/images/common/avatar.png" x="300" y="20" width="50" height="50" style="filter:url(#feBlendLighten);"/>
    <image xlink:href="https://s.tinyx.cc/images/common/avatar.png" x="20" y="120" width="50" height="50" style="filter:url(#feBlendOpacityHalf);"/>
    <text x="25" y="90" fill="green" font-size="8pt" font-weight="bold">normal</text>
    <text x="90" y="90" fill="green" font-size="8pt" font-weight="bold">multiply</text>
    <text x="165" y="90" fill="green" font-size="8pt" font-weight="bold">screen</text>
    <text x="235" y="90" fill="green" font-size="8pt" font-weight="bold">darken</text>
    <text x="305" y="90" fill="green" font-size="8pt" font-weight="bold">lighten</text>
    <text x="15" y="190" fill="green" font-size="8pt" font-weight="bold">translucent</text>
</svg>

效果:

留下评论

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