千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:武汉千锋IT培训  >  技术干货  >  SVG模糊和阴影效果

SVG模糊和阴影效果

来源:千锋教育
发布人:qyf
时间: 2022-12-26 17:14:29

  我们先来学习图形的模糊效果。

  给 SVG 图形添加特殊效果,需要通过 filter 元素来实现,filter 是过滤器的意思,它是一个双标签,基本语法为尖角号 filter,尖角号 /filter。filter 元素里面包含一个或多个效果滤镜。

  filter 元素有一个必要的 id 属性,用于识别过滤器,图形通过这个 id ,指向要使用的过滤器。

  filter 元素都是在 defs 元素中定义的。defs 元素是 definitions [ˌdɛfɪˈnɪʃənz] 的简称,它也是一个双标签,基本语法为尖角号 defs,尖角号 /defs。

  模糊效果可以通过 feGaussianBlur 滤镜来创建,这是一个高斯模糊效果。它需要定义在 filter 标签里,是一个双标签,基本语法为尖角号 feGaussianBlur,尖角号 /feGaussianBlur。

  feGaussianBlur 通过 stdDeviation 属性定义模糊的数量,值是一个数字,值越大模糊程度越高。

  我们来做一个例子。

  打开编辑器,新建一个 blur-drop-shadow.html 文件,补全基础代码,在 body 里添加一个 svg 标签,定义属性 width 等于 110,height 等于 110。

  在 svg 里添加 rect 标签,给它定义属性 width 等于 90,height 等于 90,stroke 等于 green,stroke-width 等于 3,fill 等于 yellow。保存文件。

  在浏览器中打开,一个黄色背景、绿色边框的小矩形就创建好了。

  面返回编辑器,在 svg 里面顶部添加 defs 元素,在 defs 元素里添加 filter 标签,给 filter 定义一个滤镜的起始点坐标 x 等于 0,y 等于 0。

  然后在 filter 标签里添加 feGaussianBlur 标签,给它定义一个 stdDeviation 属性,值为 15。

  模糊滤镜定义好后,需要应用到图形上:首先在 filter 标签上添加一个 id 属性,值为 f1。

  然后在 rect 标签上添加 filter 属性,值为 url 小括号 # f1 url(#f1) ,这里的 f1 就是在 filter 上定义的 id 属性值。保存。

  返回浏览器,刷新。高斯模糊效果实现了。

图片 1

图片 2

  我们再来学习图形的阴影效果。

  阴影效果可以通过 feOffset 滤镜和feBlend滤镜来创建,其原理是将一个SVG 图形、图像或元素,在 xy 平面上做一定的偏移。它需要定义在 filter 标签里,是一个双标签,基本语法为尖角号 feOffset,尖角号 /feOffset。

  给 feOffset 定义 dx 属性,值是一个数字,表示阴影在 x 轴上的偏移量,再定义一个 dy 属性,值也是数字,表示阴影在 y 轴上的偏移量。

  再给 feOffset 定义一个 in 属性,表示阴影图像的来源,如果定义一个黑色的阴影,值可以设置为 SourceAlpha ,如果使用原始图像作为阴影,值可以设置为 SourceGraphic。

  最后,还需要在偏移的图像上混合原始图像,要应用 feBlend 标签,它也是一个双标签,基本语法为:尖角号 feBlend,尖角号 /feBlend。给它定义 in 属性,值为 SourceGraphic,也就是原始图像。

  (以上需要动画演示)

  我们来做一个例子。

  回到编辑器,在上个 svg 结尾处添加一个 br 标签。回车换行。

  添加一个新的 svg 标签,属性 width 等于 140,height 等于 140。

  在 svg 标签里添加 rect 标签,定义矩形的属性 width 等于 90,height 等于 90,stroke 等于 green,stroke-width 等于 3,fill 等于 yellow。保存。

  返回浏览器,刷新。一个小矩形创建好了。

  返回编辑器,在 svg 里的顶部添加 defs 元素,在 defs 元素里添加 filter 标签,给 filter 定义滤镜起始坐标属性: x 等于 0,y 等于 0。定义滤镜的宽高属性:width 等于 200,height 等于 200。

  在 filter 标签里添加一个 feOffset 标签,定义属性 in 等于 SourceAlpha,给图形制作一个黑色阴影。定义阴影的偏移属性 dx 等于 20,dy 等于 20。

  再添加一个 feBlend 标签,定义 in 属性,值为 SourceGraphic,实现在偏移的图像上混合原始图像。

  阴影滤镜定义好后,需要应用到图形上:首先在 filter 标签上添加一个 id 属性,值为 f2。

  注意 id 属性的值,要保证唯一性,不然页面里的图形就不知道具体使用哪个滤镜了。

  然后在 rect 标签上添加 filter 属性,值为 url 小括号 # f2 url(#f2) 。保存。

  回到浏览器,刷新,阴影效果实现了。不过你一定不满意这个投影,因为它太生硬了,得模糊一下。

图片 3

  返回编辑器,在 filter 里添加一个新的标签 feGaussianBlur,定义属性 stdDeviation,值为 10。保存。

  回到浏览器,刷新,模糊的阴影效果实现了。

图片 4

  SVG的模糊和阴影效果我们就讲完了。大家动手试试吧!

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

猜你喜欢LIKE

javascript中如何搜索数组元素

2023-03-17

ui设计之js效果-如何制作文字倒计时

2023-03-06

svn与git的区别是什么?使用git的优势是什么

2023-03-03

最新文章NEW

java异常分类三大类是什么?

2023-06-06

什么是枚举?没有枚举之前怎么做的

2023-03-17

echarts和chart的优缺点对比

2023-03-09

相关推荐HOT

更多>>

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>