Gradasi Jujur SVG

Gradian Radial SVG - <radialGradient>

<radialGradient> Elemen digunakan untuk mendefinikan gradian radial (radiant gradient).

<radialGradient> Elemen mesti disiripkan dalam <defs> dalam tanda.<defs> Elemen adalah singkatan untuk definisi (definitions), yang mengandung definisi elemen khusus (seperti filter).

Contoh 1

Tentukan satu bulatan elips yang mempunyai gradian radial dari putih ke biru:

Ini adalah kod SVG:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />

Pengertian kod:

• Sifat id tanda <radialGradient> menentukan nama unik gradian
• Sifat cx, cy dan r menentukan bulatan luar paling luas, sifat fx dan fy menentukan bulatan dalam paling kecil
• Jangkauan warna gradian dapat disusun dari dua atau lebih warna. Setiap warna ditentukan dengan tanda <stop>
• Sifat offset digunakan untuk menentukan tempat mulai dan tamat warna gradian
• Sifat fill menghubungkan elemen elips ke gradian

Contoh 2

Tentukan satu bulatan elips yang mempunyai gradian radial dari putih ke biru:

Ini adalah kod SVG:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  

<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />