SVG 線性漸變

<defs> 和 <filter>

所有 SVG 濾鏡都在 <defs> 元素中定義。<defs> 元素是定義（definitions）的縮寫，包含對特殊元素（比如濾鏡）的定義。

<filter> 元素用于定義 SVG 濾鏡。<filter> 元素有一個必需的 id 屬性，用于標識濾鏡。然后圖形會指向要使用的濾鏡。

SVG <feOffset>

例子 1

<feOffset> 元素用于創建陰影效果。思路是：首先獲取一個 SVG 圖形（圖像或元素），然后在 xy 平面上稍微移動它。

第一個例子偏移了一個矩形（使用 <feOffset>），然后將原始圖像混合到偏移圖像的頂部（使用 <feBlend>）：

這是 SVG 代碼：

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

親自試一試

代碼解釋：

• <filter> 元素的 id 屬性定義了濾鏡的唯一名稱
• <rect> 元素的 filter 屬性將該元素鏈接到 "f1" 濾鏡

例子 2

現在，可以模糊偏移圖像了（使用 <feGaussianBlur>）：

這是 SVG 代碼：

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

親自試一試

代碼解釋：

• <feGaussianBlur> 元素的 stdDeviation 屬性定義模糊量

例子 3

現在，將陰影設為黑色：

這是 SVG 代碼：

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

親自試一試

代碼解釋：

• <feOffset> 元素的 in 屬性被更改為 "SourceAlpha"，它使用 Alpha 通道而不是整個 RGBA 像素進行模糊

例子 4

現在，將陰影處理為一種顏色：

這是 SVG 代碼：

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

親自試一試

代碼解釋：

• <feColorMatrix> 濾鏡用于將偏移圖像中的顏色轉換為更接近黑色。矩陣中的三個 '0.2' 值都乘以紅色、綠色和藍色通道。減少它們的值會使顏色更接近黑色（黑色為 0）