SVG Linear Gradient

<defs> 和 <filter>

所有 SVG 滤镜都在 <defs> 元素中定义。<defs> 元素是定义（definitions）的缩写，包含对特殊元素（比如滤镜）的定义。

<filter> 元素用于定义 SVG 滤镜。<filter> 元素有一个必需的 id 属性，用于标识滤镜。然后图形会指向要使用的滤镜。

SVG <feOffset>

例子 1

<feOffset> 元素用于创建阴影效果。思路是：首先获取一个 SVG 图形（图像或元素），然后在 xy 平面上稍微移动它。

第一个例子偏移了一个矩形（使用 <feOffset>），然后将原始图像混合到偏移图像的顶部（使用 <feBlend>）：

Ito ang kodigo ng 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>

Subukan ang iyong sarili

Explanasyon ng Kodigo:

• <filter> 元素的 id 属性定义了滤镜的唯一名称
• <rect> 元素的 filter 属性将该元素链接到 "f1" 滤镜

例子 2

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

Ito ang kodigo ng 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>

Subukan ang iyong sarili

Explanasyon ng Kodigo:

• <feGaussianBlur> 元素的 stdDeviation 属性定义模糊量

Mga Halimbawa 3

Ngayon, itakda ang lilim bilang puti:

Ito ang kodigo ng 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>

Subukan ang iyong sarili

Explanasyon ng Kodigo:

• <feOffset> Ang attribute na in ng elemento ay binago sa "SourceAlpha", na gumagamit ng Alpha channel sa halip ng buong RGBA pixel para sa pagbabulok

Mga Halimbawa 4

Ngayon, baguhin ang pagkakalat ng lilim sa isang kulay:

Ito ang kodigo ng 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>

Subukan ang iyong sarili

Explanasyon ng Kodigo:

• <feColorMatrix> Ang filter na ginagamit upang baguhin ang kulay ng pinaliwanag na imahe upang malapit sa puti. Ang tatlong '0.2' na halaga sa matrix ay pinagmuti sa lahat ng kulay pula, berde at asul. Ang pagbawas ng kanilang halaga ay magiging mas malapit ang kulay sa puti (puti ay 0)