这篇文章发布于 2024年04月11日,星期四,22:01,归类于 SVG相关。 阅读 3972 次, 今日 118 次 2 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11158 鑫空间-鑫生活
本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。
一、前言
SVG滤镜元素我之前有深入介绍过两个,一个是feTurbulence滤镜,另外一个是 feDisplacementMap滤镜,前者可以用来模拟自然效果,后者可以实现元素形变,都是SVG滤镜比较高级的应用。
最近,正好无所事事,就决定查漏补缺,把SVG滤镜元素整个都过一遍,系统了解下,让对这一块的了解更加扎实,说不定以后就用到,提前做技术储备。
先从比较简单的<feBlend>
元素开始。
二、feBlend元素的作用和语法
feBlend元素是SVG中用来实现混合模式的元素。
在CSS中,混合模式使用mix-blend-mode
和background-blend-mode
属性实现,在Canvas中使用globalCompositeOperation语法实现。
在SVG中就是<feBlend>
元素。
支持的属性
<feBlend>
元素支持三个属性,分别是:
- in
- 输入元素1,混合模式的底层图形或元素。
- in2
- 输入元素2,混合模式的上层图形元素。
- mode
- 混合模式的类型。其支持的值和CSS混合模式的值是一样的。包括:
mix-blend-mode: normal; //正常 mix-blend-mode: multiply; //正片叠底 mix-blend-mode: screen; //滤色 mix-blend-mode: overlay; //叠加 mix-blend-mode: darken; //变暗 mix-blend-mode: lighten; //变亮 mix-blend-mode: color-dodge; //颜色减淡 mix-blend-mode: color-burn; //颜色加深 mix-blend-mode: hard-light; //强光 mix-blend-mode: soft-light; //柔光 mix-blend-mode: difference; //差值 mix-blend-mode: exclusion; //排除 mix-blend-mode: hue; //色相 mix-blend-mode: saturation; //饱和度 mix-blend-mode: color; //颜色 mix-blend-mode: luminosity; //亮度
三、使用案例示意
一例胜前言,假设我们有下面这张底图,美丽的森林和安静的小鹿:
然后还有一张下雪的前景特效图:
则下面的SVG代码(两种写法均)可以实现两张图片的滤色screen混合效果:
<svg width="150" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="snowEffect"> <feImage href="snow.jpg" x="0%" y="0%" width="100%" height="100%" result="snowSource" /> <feImage href="landscape.jpg" x="0%" y="0%" width="100%" height="100%" result="landscape" /> <feBlend in="landscape" in2="snowSource" mode="screen" /> </filter> </defs> <rect x="0%" y="0%" width="100%" height="100%" style="filter:url(#snowEffect);" ></rect> </svg>
其他写法:
<svg width="150" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="snowEffect2"> <feImage href="https://image.zhangxinxu.com/image/blog/201905/snow.jpg" width="100%" height="100%" result="snowSource2" /> <feBlend in="SourceGraphic" in2="snowSource2" mode="screen" /> </filter> </defs> <image href="https://image.zhangxinxu.com/image/blog/201905/landscape-s.jpg" width="100%" height="100%" style="filter: url(#snowEffect2);" /> </svg>
均可以实现如下图所示的雪中森林小鹿的效果:
眼见为实,您可以狠狠地点击这里:feblend两个图像混合模式效果demo
一些说明
SourceGraphic是SVG滤镜中in和in2属性内置的关键字,表示应用滤镜的原始图像内容,完整支持的属性值包括:SourceGraphic
| SourceAlpha
| BackgroundImage
| BackgroundAlpha
| FillPaint
| StrokePaint
,这些以后有机会展开介绍。
四、结语说明
想起一个词语,林深见鹿,哈哈哈,比较符合上面的示意图,找了个美图。
好无聊哦。
唉……最近给自己放假,每天回来大部分时间都是刷沙雕视频,周末钓鱼也是钓两天,着实没劲,其满足感不如创造东西来得持久。
所以呢,决定了,动笔开始写写小说,然后开始录制CSS世界三部曲精讲视频。
最晚五一节之后就开始,人呐,还是要忙碌点才充实。
正所谓,林深才见鹿。
🦒🦒🦒🦒
本文为原创文章,欢迎分享,勿全文转载,如果实在喜欢,可收藏,永不过期,且会及时更新知识点及修正错误,阅读体验也更好。
本文地址:https://www.zhangxinxu.com/wordpress/?p=11158
(本篇完)
- CSS, SVG和canvas分别实现文本文字纹理叠加效果 (0.858)
- 深入理解SVG feDisplacementMap滤镜及实际应用 (0.284)
- 借助SVG滤镜实现CSS无法实现的阴影和模糊效果 (0.167)
- 不使用font-weight等CSS实现文字变瘦或变胖效果 (0.167)
- 如何用简单的Web方法实现图片的马赛克效果 (0.167)
- 记一次技术交流,feMerge滤镜复制任意DOM元素样式 (0.167)
- 搞懂SVG中各种Light相关的光源滤镜 (0.142)
- CSS混合模式mix-blend-mode/background-blend-mode简介 (0.122)
- 小tips:使用canvas在前端实现图片水印合成 (0.122)
- 如何让MP4 video视频背景色变成透明? (0.122)
- 巧用CSS cross-fade()实现背景图像半透明效果 (RANDOM - 0.025)
好像 CSS 这个滤镜并不能正确调用……
保持学习的精神令人敬佩