今天学习SVG滤镜feGaussianBlur和feDropShadow

这篇文章发布于 2024年04月14日,星期日,23:39,归类于 SVG相关。 阅读 2267 次, 今日 32 次 4 条评论

 

一、写在开头的絮絮叨

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

不开心 美女图

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

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

打开文档,快速过了一边,看看还有什么自己不知道的,再评估下学习难度,嗯……目前这个阶段比较适合学习的是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滤镜学习进发。

不过……唉,我现在怎么特别想去钓鱼呢,知识没学、文章没写之前对钓鱼没什么干劲,可一旦做完这些事情,想去钓鱼了,又没有时间了。

人有悲欢离合,月有阴晴圆缺,此事古难全。

只能等下周了。

动漫 美女 钓鱼

(本篇完)

分享到:


发表评论(目前4 条评论)

  1. codehz说道:

    edgeMode 最实用的地方在于,可以解决半透明边缘的问题。
    传统上对一个完整的图像整体应用blur,不管是 svg 方法还是 css filter 都会造成边缘透明化。
    当然 css 可能可以单独外面套一个不透明的东西然后再 overflow hidden 掉(但这样也会有白边一类的)。
    另一种方法就是 contain paint 配合 backdrop filter,这样也会触发 mirror 的模式。
    svg 这边有 edgemode 就直接多了

  2. Erimus说道:

    SVG Blur edgeMode Test: https://codepen.io/Erimus/pen/ExJexeP?editors=1000

    上面这个例子用Safari可以看到区别,但是duplicate和wrap没看出差异。一般duplicate是沿用边缘最外的像素。wrap我猜是会用到另一边的像素,好像PS还是PIL里有类似设定,但这里例子里的红色外侧并没有用到绿色的部分,所以我不太确定。

  3. Erimus说道:

    edgeMode应该是边缘处理会用到。比如说,圆形在画布边缘,这时候如果做了高斯模糊,那边缘的计算因为是通过矩阵,或者简单理解为【周边像素】。在【周边像素】不够的情况下,用什么作为默认值,就是解决这个问题。

    比如红色圆形,边缘的模糊是用黑色和红色混,还是白色和红色混,还是wrap用边缘的像素颜色,还是镜像之类的。

    在早期的CSS filter blur中,div边缘也经常发生些不太理想的状况。

    但是查了下caniuse,好像无效可能是跟浏览器支持有关:
    SVG element: feGaussianBlur: edgeMode | Can I use… Support tables for HTML5, CSS3, etc: https://caniuse.com/mdn-svg_elements_fegaussianblur_edgemode

  4. L说道:

    捉虫🐛
    虽然今天的天气非常”时候”钓鱼 =》虽然今天的天气非常”适合”钓鱼