Notes:SVG(3)---滤镜和渐变
SVG滤镜使用filter标签来定义，该标签必须嵌套在defs元素里面，并且必须指定一个ID，以供引用。
在 SVG 中，可用的滤镜有：
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
1、高斯模糊feGaussianBlur，和css滤镜filter:blur一样，所有的滤镜都需要指定输入in,结果result,以供引用
输入in：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint
<path d="M250 150 L150 350 L350 350 Z" style="fill:red;stroke:red;filter:url(#gaussian_blur);"/> <defs> <filter id="gaussian_blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="10"/> </filter> </defs>
结果如下所示：
2、阴影feOffset，配合feBlend滤镜，该滤镜是将两个图像对象合并在一起。
feOffset须指定属性:in,dx,dy
feBlend指定属性:in,in2,mode(normal | multiply | screen | darken | lighten)
<defs> <filter id="gaussian_blur" x="0" y="0" width="200%" height="200%"> <feOffset in="SourceGraphic" result="fo" dx="30" dy="30"/> <feGaussianBlur in="fo" result="fg" stdDeviation="5" /> <feBlend in="SourceGraphic" in2="fg" mode="darken" /> </filter> <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/> </linearGradient> </defs>
结果如下：
如果要制作黑色投影，可以将feOffset的in输入改成SourceAlpha即可。
3、颜色处理feColorMatrix，使用矩阵来影响颜色的每个通道值(基于RGBA)，需要指定的属性为：in,type(matrix | saturate | hueRotate | luminanceToAlpha),values。
计算规则如下。
1 0 0 0 0 // R = 1*R + 0*G + 0*B + 0*A + 0
0 1 0 0 0 // G = 0*R + 1*G + 0*B + 0*A + 0
0 0 1 0 0 // B = 0*R + 0*G + 1*B + 0*A + 0
0 0 0 1 0 // A = 0*R + 0*G + 0*B + 1*A + 0
<defs> <filter id="gaussian_blur" x="0" y="0" width="200%" height="200%"> <feOffset in="SourceGraphic" result="fo" dx="30" dy="30"/> <feColorMatrix type="matrix" in="fo" result="cm" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0"/> <feGaussianBlur in="cm" result="fg" stdDeviation="5" /> <feBlend in="SourceGraphic" in2="fg" mode="normal" /> </filter> <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/> </linearGradient> </defs>
去掉红色，结果如下所示：
4、feFlood滤镜，使用flood-color和flood-opacity给指定区域填充颜色以及相应透明度
<defs> <filter id="gaussian_blur" x="0" y="0" width="200%" height="200%"> <feFlood x="0" y="0" width="100" height="100" flood-color="cornflowerblue" flood-opacity="0.5"/> </filter> </defs>
效果如下：
渐变分为线性渐变和放射渐变，SVG中渐变使用linearGradient和radialGradient标签来定义。
线性渐变可被定义为水平、垂直或角形的渐变：
- 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
- 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
- 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
- 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:blue; stop-opacity:1"/> <stop offset="25%" style="stop-color:blue; stop-opacity:1"/> <stop offset="50%" style="stop-color:white; stop-opacity:1"/> <stop offset="75%" style="stop-color:red; stop-opacity:1"/> <stop offset="100%" style="stop-color:yellow; stop-opacity:1"/> </linearGradient>
效果如下：
<radialGradient> 用来定义放射性渐变。
cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。
每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
<circle cx="100" cy="100" r="100" style="fill:url(#orange_red)" /> <radialGradient id="orange_red" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:blue; stop-opacity:1"/> <stop offset="25%" style="stop-color:blue; stop-opacity:1"/> <stop offset="50%" style="stop-color:white; stop-opacity:1"/> <stop offset="75%" style="stop-color:red; stop-opacity:1"/> <stop offset="100%" style="stop-color:yellow; stop-opacity:1"/> </radialGradient>
效果：
