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