Gradasi Linear SVG

SVG 漸變

漸變是從一種顏色到另一種顏色的平滑過渡。此外，可以將多種顏色過渡應用於同一元素。

SVG 中有兩種主要的漸變類型：

• 線性漸變
• 放射漸變

SVG 線性漸變 - <linearGradient>

<linearGradient> 元素用於定義線性漸變。

<linearGradient> 元素必須嵌套在 <defs> 標記內。<defs> 元素是定義（definitions）的縮寫，包含對特殊元素（比如濾鏡）的定義。

線性漸變可以定義為水平、垂直或角漸變：

• 當 y1 和 y2 相等且 x1 和 x2 不相等時創建水平漸變
• 當 x1 和 x2 相等且 y1 和 y2 不相等時創建垂直漸變
• 當 x1 和 x2 不相同並且 y1 和 y2 不相等時創建角漸變

例子 1

定义一个椭圆，它有从黃色到紅色的水平線性漸變：

Ini adalah kod SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" 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>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Cuba Sendiri

Penggayaan Kod

• Sifat id dalam tag <linearGradient> menentukan nama unik graden
• Sifat x1, x2, y1, y2 dalam tag <linearGradient> menentukan tempat mulai dan tamat graden
• Range warna graden boleh diwakili oleh dua atau lebih warna. Setiap warna ditentukan dengan markah <stop>
• Sifat offset digunakan untuk menentukan tempat mulai dan tamat warna graden
• Sifat fill menghubungkan elemen bulatan kepada graden

Contoh 2

Tentukan satu bulatan yang mempunyai graden vertical daripada kuning kepada merah:

Ini adalah kod SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Cuba Sendiri

Contoh 3

Tentukan satu bulatan dan tambahkan teks di dalam bulatan, ia mempunyai graden horizontal daripada kuning kepada merah:

Ini adalah kod SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" 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>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

Cuba Sendiri

Penggayaan Kod

• Elemen <text> digunakan untuk menambahkan teks