SVG图形滤镜

SVG有提供Filter(滤镜)这个东西，可以用来在SVG图形上加入特殊的效果，像是图形模糊化、产生图形阴影、将杂讯加入图形等。以下介绍的是图形模糊化、产生图形阴影这2个滤镜效果。

 

浏览器对于SVG Filter的支援

SVG : 滤镜

(仅列出部分有使用到的属性)

• <svg></svg>

  • height : 整个图形(画布)的原始长度
  • width: 整个图形(画布)的原始宽度

• <defs></defs>

  • defs是definitions(定义)的简写，用来存放SVG特殊元素的定义，像是filter

• <filter></filter>

  • 滤镜的本体，设定滤镜套用后的实际效果
  • id: filter的名称
  • x: filter的x坐标
  • y: filter的y坐标

  (也有width、height)

• <rect></rect>或<rect />

  • ...
  • filter: 要套用的滤镜

范例1 - 套用模糊滤镜

(左边有套用滤镜，右边是原始图形)

<svg height="300" width="400">
    <defs>
        <filter id="blur_effect" x="0" y="0">
             <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </defs>
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" filter="url(#blur_effect)" />
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" transform="translate(150,0)" />
</svg>

 feGaussianBlur的SourceGraphic表示将整个图形来源(rect)都套用滤镜

1. filter="url(#滤镜名称)"

范例2 - 产生阴影效果

 (左边有套用滤镜，右边是原始图形)

• <feOffset></feOffset>或<feOffset />

  • in: 套用滤镜效果的图形来源
  • dx: 图形在x坐标上的位移
  • dy: 图形在y坐标上的位移
  • result: 套用滤镜后的结果名称

• <feBlend></feBlend>或<feBlend />

  • in: 套用滤镜效果的图形来源1
  • in2: 套用滤镜效果的图形来源2
  • mode: 图形混和的模式

feOffset的功能是将原始图形进行位移，feBlend的功能则是将位移后的图形和原始图形混和在一起。
如果filetr的width、height没有设定的比rect大一些，会造成部分滤镜阴影效果消失。

<svg height="300" width="400">
    <defs>
        <filter id="blur_effect" x="0" y="0" width="150px" height="150px">
            <feOffset result="offOut" in="SourceGraphic" dx="25" dy="25" />
            <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
        </filter>
    </defs>
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" filter="url(#blur_effect)" />
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" transform="translate(150,0)" />
</svg>

范例3 - 产生阴影效果+阴影模糊化

 

(左边有套用滤镜，右边是原始图形)

可以把位移后的图形结果(offOut)再套用模糊滤镜，最后将模糊后的结果(blurout)与原始图形(SourceGraphic)混和在一起。

<svg height="300" width="400">
    <defs>
        <filter id="blur_effect" x="0" y="0" width="150px" height="150px">
            <feOffset result="offOut" in="SourceGraphic" dx="25" dy="25" />
            <feGaussianBlur in="offOut" result="blurout" stdDeviation="5" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
    </defs>
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" filter="url(#blur_effect)" />
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" transform="translate(150,0)" />
</svg>