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>

效果：