SVG feBlend过滤器用法示例

< feBlend> 过滤器用于使用以下方法组合图像的两层:乘法, 加深, 加网或加亮。
它接受两个输入, ” in” , ” in2″ 和” mode” , 这些输入指定如何混合输入。
例子

< !DOCTYPE html> < html> < body> < svg height="900" width="900"> < filter id="multiply" x="0" y="0" height="100%" width="100%"> < feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/> < /filter> < g enable-background="new"> < rect x="10" y="10%" height="4%" width="50%" fill="purple" fill-opacity=".6"/> < rect x="10" y="14%" height="4%" width="50%" fill="blue" fill-opacity=".6"/> < rect x="10" y="18%" height="4%" width="50%" fill="green" fill-opacity=".4" filter="url(#multiply)" /> < /g> < /svg> < /body> < /html>

【SVG feBlend过滤器用法示例】立即测试

    推荐阅读