简介
通过特定的混合模式组合两个对象。
属性 |
说明 |
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>
效果:
SVG feBlend 标签
简介
通过特定的混合模式组合两个对象。
实例
效果:
root