SVG 滤镜

• SVG 滤镜用来向形状和文本添加特殊的 效果。在 SVG 中，可用的滤镜有：

– feBlend 、 feColorMatrix 、 feComponentTransfer 、 feComposite 、 feConvolveMatrix 、 feDiffuseLighting 、 feDisplacementMap 、 feFlood 、 feGaussianBlur 、 feImage 、 feMerge 、 feMorphology 、 feOffset 、 feSpecularLighting 、 feTile 、 feTurbulence 、 feDistantLight 、 fePointLight 、 feSpotLight

• 可以 在每个 SVG 元素上使用多个滤镜！
----------------------------------------------
高斯模糊：

 <</span>defs>

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>

   

      <</span>feOffsetresult="offOut" in="SourceGraphic" dx="20" dy="20" />

      <</span>feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />

      <</span>feBlendin="SourceGraphic" in2="blurOut" mode="normal" />

   

  </</span>defs>

  <</span>rectwidth="90" height="90" stroke="green" stroke-width="3"

  fill="yellow" filter="url(#f1)" />