Gampang Linear SVG

SVG Gradasi

Gradasi adalah transisi lancar dari warna ke warna lain. Selain itu, dapat digunakan beberapa transisi warna untuk elemen yang sama.

Ada dua jenis gradasi utama di SVG:

• Gradasi Linear
• Gradasi Sinar

SVG Gradasi Linear - <linearGradient>

<linearGradient> Elemen digunakan untuk mendefiniskan gradasi linear.

<linearGradient> Elemen harus disisipkan di dalam <defs> dalam tanda<defs> Elemen adalah singkatan untuk definisi (definitions), yang mengandung definisi elemen khusus (seperti filter).

Gradasi linear dapat ditentukan sebagai gradasi horizontal, vertikal, atau sudut:

• Buat gradasi horizontal saat y1 dan y2 sama dan x1 dan x2 tidak sama
• Buat gradasi vertikal saat x1 dan x2 sama dan y1 dan y2 tidak sama
• Buat gradasi sudut saat x1 dan x2 berbeda dan y1 dan y2 tidak sama

Contoh 1

Definisi sebuah lingkaran lingkaran, yang memiliki transisi linear horizontal dari kuning ke merah:

Ini adalah kode 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>

Coba Sendiri

Penjelasan Kode:

• Atribut id tag <linearGradient> mendefiniskan nama unik gradien
• Atribut x1, x2, y1, y2 dari tag <linearGradient> menentukan posisi awal dan akhir gradien
• Range warna gradien dapat terdiri dari dua atau lebih warna. Setiap warna ditentukan dengan tag <stop>
• Atribut offset digunakan untuk menentukan posisi awal dan akhir warna gradien
• Atribut fill menghubungkan elemen lingkaran bulat ke gradien

Contoh 2

Mengdefinikan sebuah lingkaran bulat dengan transisi warna vertikal dari kuning ke merah:

Ini adalah kode 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>

Coba Sendiri

Contoh 3

Mengdefinikan sebuah lingkaran bulat dan menambahkan teks didalam lingkaran bulat, dengan transisi warna horizontal dari kuning ke merah:

Ini adalah kode 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>

Coba Sendiri

Penjelasan Kode:

• Elemen <text> digunakan untuk menambahkan teks