个性化阅读
专注于IT技术分析

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>

立即测试

赞(0) 打赏
未经允许不得转载:srcmini » SVG feBlend过滤器用法示例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏