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

一、高斯模糊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>

 結果以下所示：

二、陰影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便可。

三、顏色處理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>

去掉紅色，結果以下所示：

 

 四、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>

效果：