tutorial pengembangan web terbaru
 

SVG Gradien - Linear


SVG Gradien

Sebuah gradien adalah transisi yang mulus dari satu warna ke warna lain. Selain itu, beberapa transisi warna dapat diterapkan untuk unsur yang sama.

Ada dua jenis utama dari gradien di SVG:

  • linear
  • radial

SVG Linear Gradient - <linearGradient>

The <linearGradient> elemen digunakan untuk menentukan gradien linier.

The <linearGradient> elemen harus bersarang dalam <defs> tag. The <defs> tag adalah singkatan definisi dan mengandung definisi elemen khusus (such as gradients) .

gradien linier dapat didefinisikan sebagai gradien horisontal, vertikal atau sudut:

  • gradien horisontal dibuat ketika y1 dan y2 adalah sama dan x1 dan x2 berbeda
  • gradien vertikal dibuat ketika x1 dan x2 adalah sama dan y1 dan y2 berbeda
  • gradien sudut dibuat ketika x1 dan x2 berbeda dan y1 dan y2 berbeda

contoh 1

Mendefinisikan sebuah elips dengan gradien linier horisontal dari kuning ke merah:

style="stop-color:rgb(255,255,0);stop-opacity:1" /> style="stop-color:rgb(255,0,0);stop-opacity:1" /> mengisi = "url (# grad1)" /> Maaf, browser Anda tidak mendukung SVG inline.

Berikut adalah kode SVG:

Contoh

<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>
Cobalah sendiri "

Code explanation:

  • The id atribut dari <linearGradient> tag mendefinisikan nama yang unik untuk gradien
  • X1 itu, x2, y1, atribut y2 dari <linearGradient> tag menentukan awal dan akhir posisi gradien
  • Rentang warna untuk gradien dapat terdiri dari dua atau lebih warna. Setiap warna ditentukan dengan <stop> tag. The offset atribut digunakan untuk mendefinisikan mana warna gradient mulai dan berakhir
  • The fill atribut sponsor elemen elips untuk gradien

contoh 2

Mendefinisikan sebuah elips dengan gradien linier vertikal dari kuning ke merah:

style="stop-color:rgb(255,0,0);stop-opacity:1" /> style="stop-color:rgb(255,255,0);stop-opacity:1" /> mengisi = "url (# grad2)" /> Maaf, browser Anda tidak mendukung SVG inline.

Berikut adalah kode SVG:

Contoh

<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,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(#grad2)" />
</svg>
Cobalah sendiri "

contoh 3

Mendefinisikan sebuah elips dengan gradien linier horisontal dari kuning ke merah, dan menambahkan teks di dalam elips:

style="stop-color:rgb(255,255,0);stop-opacity:1" /> style="stop-color:rgb(255,0,0);stop-opacity:1" /> mengisi = "url (# grad3)" /> SVG Maaf, browser Anda tidak mendukung SVG inline.

Berikut adalah kode SVG:

Contoh

<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>
Cobalah sendiri "

Code explanation:

  • The <text> elemen digunakan untuk menambah teks