by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11166 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、写在开头的絮絮叨

今天周日在家，本来想去钓鱼的，临出门，又不想了，唉……连续钓鱼，啥产出都没有，有负罪感，钓鱼都不开心。

算了，既然不愿意，何必勉强自己，虽然今天的天气非常时候钓鱼，阴天，温度稳定，全天鱼口都不算，买的红虫怕是也要浪费了。

所以，开始打开电脑学习，写作吧。

打开文档，快速过了一边，看看还有什么自己不知道的，再评估下学习难度，嗯……目前这个阶段比较适合学习的是feGaussianBlur和feDropShadow这两个滤镜元素，因为都是静态效果，也就是不需要和其他元素发生交集就能有效果。

好，抓紧时间，看看能不能今天把这篇文章给撸出来。

二、先说说feGaussianBlur元素

看名字就知道是实现高斯模糊效果的。

其支持如下三个HTML属性：

in

in是很多滤镜元素都有的属性，表示输入元素（或滤镜应用结果），并非必须使用的属性，在本文，暂时可以忽略此属性，之后会专门介绍。

stdDeviation

stdDeviation是 standard deviation 的缩写，表示标准偏差，实际效果是高斯模糊的大小。

例如下面这段SVG示意代码：

<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>

实时效果如下所示：

edgeMode

edgeMode可以决定边缘模糊的运算方式，支持如下三个值：

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

（本篇完）