by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11166 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。
一、写在开头的絮絮叨
今天周日在家，本来想去钓鱼的，临出门，又不想了，唉……连续钓鱼，啥产出都没有，有负罪感，钓鱼都不开心。
算了，既然不愿意，何必勉强自己，虽然今天的天气非常时候钓鱼，阴天，温度稳定，全天鱼口都不算，买的红虫怕是也要浪费了。
所以，开始打开电脑学习，写作吧。
打开文档，快速过了一边，看看还有什么自己不知道的，再评估下学习难度，嗯……目前这个阶段比较适合学习的是feGaussianBlur和feDropShadow这两个滤镜元素，因为都是静态效果，也就是不需要和其他元素发生交集就能有效果。
好，抓紧时间，看看能不能今天把这篇文章给撸出来。
二、先说说feGaussianBlur元素
看名字就知道是实现高斯模糊效果的。
其支持如下三个HTML属性：
- in
in是很多滤镜元素都有的属性，表示输入元素（或滤镜应用结果），并非必须使用的属性，在本文，暂时可以忽略此属性，之后会专门介绍。- stdDeviation
stdDeviation是 standard deviation 的缩写，表示标准偏差，实际效果是高斯模糊的大小。- 例如下面这段SVG示意代码：
- 实时效果如下所示：
- edgeMode
edgeMode可以决定边缘模糊的运算方式，支持如下三个值：
<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
<filter id="gaussianBlur1">
<feGaussianBlur stdDeviation="1" />
</filter>
<filter id="gaussianBlur2">
<feGaussianBlur stdDeviation="5" />
</filter>
<filter id="gaussianBlur3" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="10" />
</filter>
<circle cx="100" cy="100" r="50" style="filter: url(#gaussianBlur1);" />
<circle
cx="100"
cy="100"
r="50"
style="filter: url(#gaussianBlur2); transform: translateX(140px);" />
<circle
cx="100"
cy="100"
r="50"
style="filter: url(#gaussianBlur3); transform: translateX(280px);" />
</svg>
duplicate | wrap | mirror | none （默认值）
至于各个值的含义，大家无需关心，因为，我搞了个demo跑了下，发现各个值的差异肉眼不可见（也可能是自己使用方式不对），平时也没机会用到此属性，所以忽略。
因此，一轮下来，唯一需要关心的属性就是stdDeviation。
三、关于feDropShadow元素
feDropShadow是实现投影效果的，语法上类似CSS中的filter:drop-shadow()滤镜函数，包括偏移大小，颜色和模糊大小。
这几个参数对应的HTML属性值如下所示：
- dx
- 水平偏移大小
- dy
- 垂直偏移大小
- stdDeviation
- 模糊大小
- flood-color
- flood是充斥的意思，这里指投影的填充颜色
- flood-opacity
- 投影的透明度，由于flood-color本身支持rgba()和#rrggbbaa语法，因此，
flood-opacity属性一般多用在flood-color是关键字颜色的场景下。
案例说明
例如，有如下所示的SVG代码：
<svg
width="320"
height="192"
xmlns="http://www.w3.org/2000/svg">
<filter id="zxxShadow">
<feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="#f00a" />
</filter>
<text x="10" y="65" class="heavy" filter="url(#zxxShadow)">CSS新世界</text>
<style>.heavy {
font-size: 50px;
font-weight: bold;
font-family: system-ui;
}</style>
</svg>
就可以实现如下图所示的文字渲染效果了，黑色的“CSS新世界”带着红色的投影。
三、更复杂使用案例
这里演示下带投影的图片局部模糊效果。
相关SVG代码如下所示：
<svg
width="256"
height="192"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="zxxBlur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
<filter id="zxxShadow">
<feDropShadow in="SourceGraphic" dx="5" dy="5" stdDeviation="5" flood-color="#0005" />
</filter>
<clipPath id="zxxClip">
<rect x="40" y="35" width="160" height="80" />
</clipPath>
<image href="example.jpg" width="90%" filter="url(#zxxShadow)" />
<image
href="example" width="90%"
clip-path="url(#zxxClip)"
filter="url(#zxxBlur)"
/>
</svg>
就可以实现如下截图所示的图片中间区域模糊的效果了。
眼见为实，您可以狠狠地点击这里：SVG实现局部高斯模糊效果demo
实现原理也比较简单，图片剪裁，应用高斯模糊，覆盖在没有高斯模糊的底图上。
四、要不，就先这样
Ok，今天的学习就到此为止，在12点之前撸出来了，回头一看，恩恩，自己还是有不少收获的，比方说clipPath元素的使用，可以近似实现遮罩一样的效果等。
接下来会向着更复杂的SVG滤镜学习进发。
不过……唉，我现在怎么特别想去钓鱼呢，知识没学、文章没写之前对钓鱼没什么干劲，可一旦做完这些事情，想去钓鱼了，又没有时间了。
人有悲欢离合，月有阴晴圆缺，此事古难全。
只能等下周了。
本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11166
（本篇完）