SVG - Gradien

Gradien mengacu pada transisi mulus dari satu warna ke warna lain dalam suatu bentuk. SVG menyediakan dua jenis gradien.

Linear Gradients - Merupakan transisi linier dari satu warna ke warna lain dari satu arah ke arah lain.
Radial Gradients - Merupakan transisi melingkar dari satu warna ke warna lain dari satu arah ke arah lain.

Gradien Linier

Pernyataan

Berikut ini adalah deklarasi sintaks <linearGradient>elemen. Kami hanya menunjukkan atribut utama.

<linearGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   x1="x-axis co-ordinate" 
   y1="y-axis co-ordinate"     
   x2="x-axis co-ordinate" 
   y2="y-axis co-ordinate"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</linearGradient>

Atribut

Sr.No.	Nama & Deskripsi
1	gradientUnits- unit untuk menentukan sistem koordinat untuk berbagai nilai panjang dalam gradien. Jika gradientUnits = "userSpaceOnUse", nilai mewakili nilai dalam sistem koordinat pengguna saat ini pada saat elemen gradien digunakan. Jika patternContentUnits = "objectBoundingBox", nilai mewakili nilai dalam pecahan atau persentase kotak pembatas pada elemen referensi di tempat pada saat elemen gradien digunakan. Default-nya adalah userSpaceOnUse.
2	x1- koordinat sumbu x dari vektor gradien. Defeault adalah 0.
3	y1- koordinat sumbu y dari vektor gradien. Default-nya adalah 0.
4	x2- koordinat sumbu x dari vektor gradien. Defeault adalah 0.
5	y2- koordinat sumbu y dari vektor gradien. Default-nya adalah 0.
6	spreadMethod- menunjukkan metode penyebaran gradien dalam elemen grafis. Default-nya adalah 'pad'.
7	xlink:href - digunakan untuk merujuk ke gradien lain.

Contoh

testSVG.htm

<html>
   <title>SVG Linear Gradient</title>
   <body>
   
      <h1>Sample SVG Linear Gradient</h1>
   
      <svg width="600" height="600">
      
         <defs>
            <linearGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </linearGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Linear Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" 
            fill="url(#sampleGradient)" />
         </g>
         
      </svg>
   
   </body>
</html>

Satu elemen <linearGradient> didefinisikan sebagai sampleGradient.
Dalam linearGradient, dua offset ditentukan dengan dua warna.
dalam elemen persegi, dalam atribut isian, url dari gradien ditentukan untuk mengisi persegi panjang dengan gradien yang dibuat sebelumnya.

Keluaran

Buka textSVG.htm di browser web Chrome. Anda dapat menggunakan Chrome / Firefox / Opera untuk melihat gambar SVG secara langsung tanpa plugin apa pun. Internet Explorer 9 dan lebih tinggi juga mendukung rendering gambar SVG.

Gradien Radial

Pernyataan

Berikut ini adalah deklarasi sintaks <radialGradient>elemen. Kami hanya menunjukkan atribut utama.

<radialGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   cx="x-axis co-ordinate of center of circle." 
   cy="y-axis co-ordinate of center of circle."     
   
   r="radius of circle" 
   
   fx="focal point for the radial gradient"     
   fy="focal point for the radial gradient"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</radialGradient>

Atribut

Sr.No.	Nama & Deskripsi
1	gradientUnits- unit untuk menentukan sistem koordinat untuk berbagai nilai panjang dalam gradien. Jika gradientUnits = "userSpaceOnUse", nilai mewakili nilai dalam sistem koordinat pengguna saat ini pada saat elemen gradien digunakan. Jika patternContentUnits = "objectBoundingBox", nilai mewakili nilai dalam pecahan atau persentase kotak pembatas pada elemen referensi di tempat pada saat elemen gradien digunakan. Default-nya adalah userSpaceOnUse.
2	cx- koordinat sumbu x dari pusat lingkaran terbesar vektor gradien. Defeault adalah 0.
3	cy- koordinat sumbu y dari pusat lingkaran terbesar vektor gradien. Default-nya adalah 0.
4	r- Jari-jari pusat lingkaran terbesar vektor gradien. Defeault adalah 0.
5	fx- titik fokus gradien radial. Default-nya adalah 0.
6	fy- titik fokus gradien radial. Default-nya adalah 0.
7	spreadMethod- menunjukkan metode penyebaran gradien dalam elemen grafis. Default-nya adalah 'pad'.
8	xlink:href - digunakan untuk merujuk ke gradien lain.

Contoh

testSVG.htm

<html>
   <title>SVG Radial Gradient</title>
   <body>
      
      <h1>Sample SVG Radial Gradient</h1>
      
      <svg width="600" height="600">
         <defs>
            <radialGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </radialGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Radial Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)" />
         </g>
      </svg>
      
   </body>
</html>

Satu elemen <radialGradient> didefinisikan sebagai sampleGradient.
Dalam radialGradient, dua offset didefinisikan dengan dua warna.
dalam elemen persegi, dalam atribut isian, url dari gradien ditentukan untuk mengisi persegi panjang dengan gradien yang dibuat sebelumnya.

Keluaran