SVG - Gradienti

Il gradiente si riferisce alla transizione graduale di un colore a un altro colore all'interno di una forma. SVG fornisce due tipi di sfumature.

  • Linear Gradients - Rappresenta la transizione lineare da un colore all'altro da una direzione all'altra.

  • Radial Gradients - Rappresenta la transizione circolare di un colore in un altro da una direzione all'altra.

Gradienti lineari

Dichiarazione

Di seguito è riportata la dichiarazione della sintassi di <linearGradient>elemento. Abbiamo mostrato solo gli attributi principali.

<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>

Attributi

Sr.No. Nome e descrizione
1 gradientUnits- unità per definire il sistema di coordinate per i vari valori di lunghezza all'interno del gradiente. Se gradienteUnits = "userSpaceOnUse", i valori rappresentano i valori nel sistema di coordinate utente corrente al momento in cui viene utilizzato l'elemento gradiente. Se patternContentUnits = "objectBoundingBox", i valori rappresentano i valori in frazioni o percentuali del riquadro di delimitazione sull'elemento di riferimento in posizione nel momento in cui viene utilizzato l'elemento gradiente. L'impostazione predefinita è userSpaceOnUse.
2 x1- Coordinata dell'asse x del vettore gradiente. Il valore predefinito è 0.
3 y1- Coordinata dell'asse y del vettore gradiente. L'impostazione predefinita è 0.
4 x2- Coordinata dell'asse x del vettore gradiente. Il valore predefinito è 0.
5 y2- Coordinata dell'asse y del vettore gradiente. L'impostazione predefinita è 0.
6 spreadMethod- indica il metodo per diffondere il gradiente all'interno dell'elemento grafico. L'impostazione predefinita è "pad".
7 xlink:href - usato per riferirsi a un altro gradiente.

Esempio

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>

  • Un elemento <linearGradient> definito come sampleGradient.

  • In linearGradient, due offset sono definiti con due colori.

  • nell'elemento rect, nell'attributo fill, l'URL del gradiente è specificato per riempire il rettangolo con il gradiente creato in precedenza.

Produzione

Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.

Gradienti radiali

Dichiarazione

Di seguito è riportata la dichiarazione della sintassi di <radialGradient>elemento. Abbiamo mostrato solo gli attributi principali.

<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>

Attributi

Sr.No. Nome e descrizione
1 gradientUnits- unità per definire il sistema di coordinate per i vari valori di lunghezza all'interno del gradiente. Se gradienteUnits = "userSpaceOnUse", i valori rappresentano i valori nel sistema di coordinate utente corrente al momento in cui viene utilizzato l'elemento gradiente. Se patternContentUnits = "objectBoundingBox", i valori rappresentano i valori in frazioni o percentuali del riquadro di delimitazione sull'elemento di riferimento in posizione nel momento in cui viene utilizzato l'elemento gradiente. L'impostazione predefinita è userSpaceOnUse.
2 cx- Coordinata dell'asse x del centro del cerchio più grande del vettore gradiente. Il valore predefinito è 0.
3 cy- Coordinata dell'asse y del centro del cerchio più grande del vettore gradiente. L'impostazione predefinita è 0.
4 r- raggio del centro del cerchio più grande del vettore gradiente. Il valore predefinito è 0.
5 fx- punto focale del gradiente radiale. L'impostazione predefinita è 0.
6 fy- punto focale del gradiente radiale. L'impostazione predefinita è 0.
7 spreadMethod- indica il metodo per diffondere il gradiente all'interno dell'elemento grafico. L'impostazione predefinita è "pad".
8 xlink:href - usato per riferirsi a un altro gradiente.

Esempio

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>

  • Un elemento <radialGradient> definito come sampleGradient.

  • In radialGradient, due offset sono definiti con due colori.

  • nell'elemento rect, nell'attributo fill, l'URL del gradiente è specificato per riempire il rettangolo con il gradiente creato in precedenza.

Produzione

Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.