SVG 自学微笔记(07) - 图形滤镜

不定更新、可能烂尾XD

学习资源: W3Schools、其他网路资料

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

浏览器对于SVG Filter的支援

(取自SVG Filters - W3Schools)

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 - 套用模糊滤镜

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

<feGaussianBlur></feGaussianBlur> 或 <feGaussianBlur />in: 套用滤镜效果的图形来源stdDeviation: 滤镜的模糊程度

<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)都套用滤镜filter="url(#滤镜名称)"

範例2 - 产生阴影效果

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

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

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

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

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

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>

还有更複杂的滤镜效果等待我们去发现(๑´ㅂ`๑) 。

参考资料

SVG Filters - W3Schools
一次搞懂SVG中所有常用的滤镜