博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
SVG 滤镜学习之——SVG 高斯模糊
阅读量:4150 次
发布时间:2019-05-25

本文共 530 字,大约阅读时间需要 1 分钟。

必须在 <defs> 标签中定义 SVG 滤镜。

高斯模糊(Gaussian Blur)

<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜?

<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写,它允许对诸如滤镜等特殊元素进行定义。

请把下面的代码拷贝到记事本,然后把文件保存为 "filter1.svg"。把此文件放入您的 web 目录:

 

代码解释:

  • <filter> 标签的 id 属性可为滤镜定义一个唯一的名称(同一滤镜可被文档中的多个元素使用)
  • filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时,必须使用 # 字符
  • 滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
  • <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
  • in="SourceGraphic" 这个部分定义了由整个图像创建效果

 

另一个 stdDeviation 值不同的例子

 

转载地址:http://qtlti.baihongyu.com/

你可能感兴趣的文章
JavaScript slice() 方法
查看>>
JavaScript substring() 方法
查看>>
HTML 5 新的表单元素 datalist keygen output
查看>>
(转载)正确理解cookie和session机制原理
查看>>
jQuery ajax - ajax() 方法
查看>>
将有序数组转换为平衡二叉搜索树
查看>>
最长递增子序列
查看>>
从一列数中筛除尽可能少的数,使得从左往右看这些数是从小到大再从大到小...
查看>>
判断一个整数是否是回文数
查看>>
腾讯的一道面试题—不用除法求数字乘积
查看>>
素数算法
查看>>
java多线程环境单例模式实现详解
查看>>
将一个数插入到有序的数列中,插入后的数列仍然有序
查看>>
在有序的数列中查找某数,若该数在此数列中,则输出它所在的位置,否则输出no found
查看>>
万年历
查看>>
作为码农你希望面试官当场指出你错误么?有面试官这样遭到投诉!
查看>>
好多程序员都认为写ppt是很虚的技能,可事实真的是这样么?
查看>>
如果按照代码行数发薪水会怎样?码农:我能刷到公司破产!
查看>>
程序员失误造成服务停用3小时,只得到半月辞退补偿,发帖喊冤
查看>>
码农:很多人称我“技术”,感觉这是不尊重!纠正无果后果断辞职
查看>>