SVG 教程

SVG 元素

SVG <filter> 濾鏡

SVG濾鏡<filter>元素用于為SVG圖像添加漂亮的效果。例如，陰影，模糊或高光。

濾鏡示例

這是一個(gè)簡(jiǎn)單的SVG濾鏡示例，其中顯示了兩個(gè)橢圓。左橢圓形沒(méi)有使用濾鏡，右邊的橢圓用高斯模糊濾鏡渲染：

示例

<svg width="500" height="100">
<defs>
      <filter id="blurFilter" y="-5" height="40"
          <feGaussianBlur in="SourceGraphic" stdDeviation="3" y="-"/>
      </filter>
  </defs>
    
  <ellipse cx="55" cy="60" rx="25" ry="15"
           style="stroke: none; fill: #0000ff; " />

  <ellipse cx="155" cy="60" rx="25" ry="15"
           style="stroke:none; fill:#0000ff; filter:url(#blurFilter);" />
</svg>

測(cè)試看看?/?

運(yùn)行后圖像效果：

注意右橢圓的邊緣是如何模糊的。

濾鏡輸入和輸出

SVG濾鏡需要一些輸入（源），并對(duì)其應(yīng)用濾鏡效果。濾鏡的輸入可以是形狀的圖形（表示RGB顏色），形狀的alpha通道，也可以是其他濾鏡的輸出。

SVG濾鏡從輸入產(chǎn)生圖形輸出（結(jié)果）。此輸出通常顯示，而不是應(yīng)用濾鏡的形狀。濾波器的輸出可用作另一個(gè)濾波器的輸入。因此，可以鏈接濾鏡。

這是SVG濾鏡輸入和輸出的圖示：


SVG濾鏡可以將形狀圖形，alpha通道或其他濾鏡的輸出作為輸入。

SVG濾鏡的輸入，通常在in濾鏡元素的屬性中指定。這是一個(gè)實(shí)例：

 <feGaussianBlur stdDeviation="3" in="SourceGraphic" />

如果要將SVG濾鏡的輸出用作另一個(gè)濾鏡的輸入，則需要向result濾鏡元素添加屬性。這是一個(gè)實(shí)例：

<feGaussianBlur stdDeviation="3" in="SourceGraphic" result="blur"/>

現(xiàn)在，另一個(gè)SVG濾鏡可以可以通過(guò)將值blur，放入其in屬性來(lái)使用該過(guò)濾鏡的輸出。在上面的實(shí)例中，值blur是在過(guò)濾器的result屬性中指定的。

濾鏡尺寸

一個(gè)濾鏡的尺寸是使用其x、y、width和height屬性設(shè)置的。

x和y屬性相對(duì)于用作輸入的形狀的x和y進(jìn)行解釋。由于某些濾鏡的輸出通常比輸入的大（例如在形狀周圍添加模糊），因此通常需要對(duì)x和y使用負(fù)數(shù)，以避免剪切掉濾鏡添加的圖形。

在width和height屬性也同樣簡(jiǎn)單。同樣，有時(shí)可能必須指定一個(gè)寬度和高度，該寬度和高度應(yīng)大于輸入形狀，以避免截?cái)酁V鏡添加的效果。

組合濾鏡

您可以使用元素組合濾鏡。這是一個(gè)實(shí)例：

示例

<svg width="500" height="100">

<defs>
    <filter id="blurFilter2" y="-10" height="40" x="-10" width="150">
        <feOffset in="SourceAlpha" dx="3" dy="3" result="offset2" />
        <feGaussianBlur in="offset2" stdDeviation="3"  result="blur2"/>

        <feMerge>
            <feMergeNode in="blur2" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
</defs>

<ellipse cx="55" cy="60" rx="25" ry="15"
         style="stroke: none; fill: #0000ff; filter: url(#blurFilter2);" /> 

</svg>

測(cè)試看看?/?

此示例創(chuàng)建一個(gè)SVG濾鏡，其中包含兩個(gè)濾鏡元素：<feOffset>和<feGaussianBlur>。偏移濾鏡效果(feOffset)作用于其應(yīng)用到的形狀的Alpha通道。高斯模糊(feGaussianBlur)作用于偏移濾鏡效果的輸出。

<feMerge>元素將模糊濾鏡的輸出與原始圖形組合在一起。輸入按照它們?cè)?lt;feMerge>元素中出現(xiàn)的順序組合。因此，后面的輸入顯示在前面的輸入的頂部。結(jié)果是圖像的形狀看起來(lái)像帶有陰影。運(yùn)行后圖像效果：

高斯模糊濾鏡

高斯模糊SVG濾波器可以模糊SVG形狀。高斯模糊濾鏡由<feGaussianBlur>元素表示。這是一個(gè)實(shí)例：

示例

<svg width="500" height="250">

<defs>
    <filter id="blurFilter4" x="-20" y="-20" width="200" height="200">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
</defs>
<rect x="20" y="20" width="90" height="90"
      style="stroke: none; fill: #00ff00; filter: url(#blurFilter4);" />

</svg>

測(cè)試看看?/?

本示例定義了一個(gè)內(nèi)部帶有<feGaussianblur>的<filter>。然后，該示例定義一個(gè)綠色矩形，該矩形從其CSS filter屬性引用該濾鏡。以下是生成的圖像：

模糊大小

<feGaussianBlur>元素的stdDevation屬性確定要將濾鏡應(yīng)用到的形狀模糊多少。數(shù)字越大，形狀越模糊。以下是三個(gè)具有不同值的stdDeumation屬性的示例：

示例

<svg width="500" height="250">

<defs>
    <filter id="blurFilter5" x="-20" y="-20" width="200" height="200">
        <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <filter id="blurFilter6" x="-20" y="-20" width="200" height="200">
        <feGaussianBlur in="SourceGraphic" stdDeviation="6" />
    </filter>
    <filter id="blurFilter7" x="-20" y="-20" width="200" height="200">
        <feGaussianBlur in="SourceGraphic" stdDeviation="12" />
    </filter>
</defs>

<rect x="20" y="24" width="90" height="90"
      style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);" />
<rect x="150" y="24" width="90" height="90"
      style="stroke: none; fill: #00ff00; filter: url(#blurFilter6);" />
<rect x="300" y="24" width="90" height="90"
      style="stroke: none; fill: #00ff00; filter: url(#blurFilter7);" />
</svg>

測(cè)試看看?/?

運(yùn)行后圖像效果：

請(qǐng)注意，矩形是如何變得越來(lái)越模糊的，應(yīng)用于它們的filter的stdDeumation屬性中的值越高。

模糊Alpha通道

上面的示例使用SourceGraphic作為輸入，這意味著形狀的RGB顏色用作濾鏡的輸入。您可以改為使用形狀的Alpha通道作為輸入，方法是在<feGaussianBlur>元素的in屬性上設(shè)置值SourceAlpha值。下面是一個(gè)實(shí)例：

示例

<svg width="500" height="250">

<defs>
    <filter id="blurFilter8" x="-20" y="-20" width="200" height="200">
        <feGaussianBlur in="SourceAlpha" stdDeviation="10" />
    </filter>
</defs>
<rect x="20" y="20" width="90" height="90"
      style="stroke: none; fill: #00ff00; filter: url(#blurFilter8);" /> 
</svg>

測(cè)試看看?/?

運(yùn)行后圖像效果：

注意，即使用綠色填充定義了矩形，濾鏡的輸出也是黑色和白色。當(dāng)高斯模糊濾鏡應(yīng)用于Alpha通道而不是圖形(RGB)通道時(shí)，就會(huì)發(fā)生這種情況。

偏移濾鏡

偏移濾鏡接受一個(gè)輸入并在輸出中移動(dòng)輸入。也就是說(shuō)，它可以上下左右移動(dòng)形狀。因此，它的工作方式類似于轉(zhuǎn)換，但它是在filter中完成的。下面是一個(gè)實(shí)例：

示例

<svg width="500" height="250">

<defs>
    <filter id="offsetFilter1" x="-20" y="-20" width="200" height="200">
        <feOffset in="SourceGraphic" dx="80" dy="20" />
    </filter>
</defs>
<rect x="20" y="20" width="90" height="90"
      style="stroke: #000000; fill: none; filter: url(#offsetFilter1);" />
<rect x="20" y="20" width="90" height="90"
      style="stroke: #000000; fill: none; " />
</svg>

測(cè)試看看?/?

本示例在完全相同的位置定義了兩個(gè)矩形。矩形之一應(yīng)用了偏移濾鏡，該濾鏡將其向下和向右移動(dòng)。

運(yùn)行后圖像效果。

偏移濾鏡似乎也對(duì)形狀有其他影響（某種模糊），但我不確定為什么會(huì)這樣。我至今無(wú)法找到任何關(guān)于為什么發(fā)生這種情況的解釋。

顏色矩陣濾鏡

顏色矩陣濾鏡可用于將矩陣變換應(yīng)用于形狀的顏色。這是一個(gè)實(shí)例：

示例

<svg width="500" height="250">

<defs>
    <filter id="colorMatrixFilter1" x="-20" y="-20" width="200" height="200">
        <feColorMatrix in="SourceGraphic" type="matrix"
                values="0 0 0 1 0
                        0 0 0 1 0
                        0 0 0 1 0
                        0 0 0 1 0
                "/>
    </filter>
</defs>
<rect x="20" y="20" width="90" height="90"
      style="stroke: none; fill: #0000ff; filter: url(#colorMatrixFilter1);" />
</svg>

測(cè)試看看?/?

矩陣的值在<feColorMatrix>元素的values屬性中提供?？偣脖仨氂? x 5=20個(gè)值。這些值將應(yīng)用于原始形狀的顏色，如下所示：

 0 0 0 red   0
 0 0 0 green 0
 0 0 0 blue  0
 0 0 0 1     0

運(yùn)行后圖像效果：

注意：在Chrome和Firefox中的顏色矩陣濾鏡得到的結(jié)果有些奇怪。上面的矩形是用填充色指定的，但是一旦顏色矩陣濾鏡完成其工作，則僅留下輪廓。

混合濾鏡

混合濾鏡可以將來(lái)自多個(gè)濾鏡的輸入混合為一個(gè)。這是一個(gè)實(shí)例：

示例

<svg width="500" height="250">
  <defs>
    <filter id="blurFilter3" y="-10" height="40" x="-10" width="150">
      <feOffset in="SourceAlpha" dx="3" dy="3" result="offset3" />
      <feGaussianBlur in="offset3" stdDeviation="3"  result="blur3"/>

      <feBlend  in="SourceGraphic" in2="blur3" x="-10" width="160"/>

    </filter>
  </defs>

  <ellipse cx="55" cy="60" rx="25" ry="15"
         style="stroke: none; fill: #0000ff;
                filter: url(#blurFilter3);" />

</svg>

測(cè)試看看?/?

本示例聲明一個(gè)使用3種濾鏡效果的濾鏡。前兩個(gè)是已鏈接的偏移量和高斯模糊效果。第三是需要兩個(gè)輸入（in和in2）并將其混合為一個(gè)的效果。

產(chǎn)生的效果與本文前面所述的組合濾鏡所獲得的效果非常相似。

SVG 蒙版(Mask)