•SVG 滤镜用来向形状和文本添加特殊的效果。在 SVG 中,可用的滤镜有:
–feBlend、feColorMatrix、feComponentTransfer、feComposite、feConvolveMatrix、feDiffuseLighting、feDisplacementMap、feFlood、feGaussianBlur、feImage、feMerge、feMorphology、feOffset、feSpecularLighting、feTile、feTurbulence、feDistantLight、fePointLight、feSpotLight
•可以在每个 SVG 元素上使用多个滤镜!
----------------------------------------------
高斯模糊:
----------------------------------------------
高斯模糊:
Gaussian_Blur">
<</span>feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</</span>defs>
rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
•标签用来定义 SVG
滤镜。 标签使用必需的 id 属性来定义向图形应用哪个滤镜
•标签必须嵌套在 <</span>defs>
标签内。<</span>defs> 标签是 definitions 的缩写,它允许对诸如滤镜等特殊元素进行定义。
•标签的 id
属性可为滤镜定义一个唯一的名称(同一滤镜可被文档中的多个元素使用)
•filter:url 属性用来把元素链接到滤镜。当链接滤镜 id
时,必须使用 # 字符
•滤镜效果是通过 <</span>feGaussianBlur>
标签进行定义的。fe后缀可用于所有的滤镜
•<</span>feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
•in="SourceGraphic" 这个部分定义了由整个图像创建效果
-------------------------------
阴影:
-------------------------------
阴影:
<</span>defs>