Come Creare un Testo con colore sfumato usando SVG

[NLSweb]

Questa piccola guida vuole mostrare come usare SVG per creare un TESTO colorato con una sfumatura lineare, quindi da un colore verso un altro colore in orizzontale o verticale.

Nota Bene : testato e funzionante su Chrome e Firefox , problemi di compatibilita' con altri browser.

Per poter semplificare il procedimendo ho creato un libreria jQuery con una funzione che modifica tutti i parametri essenziali di SVG.

Come prima cosa dobbiamo creare la struttura HTML
Questa potra' essere disposta dove si vuole nella propria pagina web.

<svg id="AreaSVG" height="" width="">
<defs>
<linearGradient y2="" x2="" y1="0%" x1="0%" id="SVG">
 <stop id="StartColor" stop-color="" offset="0"></stop>
 <stop id="StopColor" stop-color="" offset="1"></stop>
</linearGradient>
</defs>
 <g><text fill="url(#SVG)" stroke="#000000" stroke-width="0" x="0" y="" id="TESTO"></text></g>
</svg>

Quindi occorre caricare la libreria jQuery e chiamare la funzione
come potrete vedere gli argomenti della funzione definiscono :
- l'area del SVG
- il testo da scrivere
- i colori per la sfumatura
- il font e la dimensione del testo

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="svgtext.js"></script>
<script>
 $(document).ready(function(){
   
   /* funzione creata con jQuery */
   /* Argometi funzione: */
   /* CreaTestoColorato(W,H,testo,col1,col2,orienta,Font,dimfont) */
   /* W -> width area SVG , H -> height area SVG */
   /* testo -> il testo da scrivere */
   /* col1 -> sfumatura di colore partenza */
   /* col2 -> sfumatura di colore arrivo */
   /* orienta -> 1 sfumatura lineare orizzontale , 2 sfumatura lineare verticale */
   /* Font -> valore da 0 a 4 Web Safe Font (0=Arial,1=Comic,2=Impact,3=Tahoma,4=Verdana) */
   /* dimfont -> valore da 0 a 1000 , dimensione del font dove 100 = 12px */
 
   CreaTestoColorato(400,200,"Testo da colorare","#FF0000","#000000",2,0,150);  
   
 });
</script>

la libreria svgtext.js non fa altro che leggere gli argomenti funzione ed applicarli al SVG

function CreaTestoColorato(W,H,testo,col1,col2,orienta,Font,dimfont){
 var SafeFont = new Array(5);
 SafeFont[0] = "Arial, Helvetica, sans-serif"; 
 SafeFont[1] = "'Comic Sans MS', cursive, sans-serif"; 
 SafeFont[2] = "Impact, Charcoal, sans-serif"; 
 SafeFont[3] = "Tahoma, Geneva, sans-serif"; 
 SafeFont[4] = "Verdana, Geneva, sans-serif"; 
 var dimensioneFont = dimfont+"%";
 var Yfont =  dimfont * 0.12;
        
 $("#AreaSVG").attr("width",W);
 $("#AreaSVG").attr("height",H);
 $("#TESTO").css({"font-family":SafeFont[Font],"font-size":dimensioneFont});
 $("#TESTO").html(testo);
 $("#TESTO").attr("y",Yfont);
 $("#StartColor").attr("stop-color", col1);
 $("#StopColor").attr("stop-color", col2);
 if(orienta==1){
  $("#SVG").attr("x2","100%");
  $("#SVG").attr("y2","0%");
 }else{
  $("#SVG").attr("x2","0%");
  $("#SVG").attr("y2","100%");
 }
}

Ecco il DEMO di questa guida

il codice e' completamente libero e puo' essere modificato a piacimento.

NLSweb


-------------------------------------------------------------------------------

p.s.:SVG senza script

si crea una area e si definisce la sua dimensione

<svg height="300" width=300""></svg>

si creano i TAG per le definizioni

<svg height="300" width="300">
<defs>

</defs>
</svg>

quindi si scrivono i comandi per definire la scala di colore
x1 e y1 sono la partenza , x2 e y2 sono l'arrivo
se si vuole ottenere una sfumatura orizzontale la X andra' da 0 a 100
se si vuole ottenere una sfumatura verticale la Y andra' da 0 a 100

<svg height="300" width="300">
<defs>
<linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="SVG">

</linearGradient>
</defs>
</svg>

quindi si assegnano i colori di partenza e di arrivo

<svg height="300" width="300">
<defs>
<linearGradient y2="0%" x2=100%"" y1="0%" x1="0%" id="SVG">
 <stop stop-color="#FFFFFF" offset="0"></stop>
 <stop stop-color="#000000" offset="1"></stop>
</linearGradient>
</defs>
</svg>

in ultimo si crea il TAG del testo e si assegna al comando FILL id SVG che definisce la sfumatura di colori

<svg height="300" width="300">
<defs>
<linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="SVG">
 <stop stop-color="#FFFFFF" offset="0"></stop>
 <stop stop-color="#000000" offset="1"></stop>
</linearGradient>
</defs>
 <g><text fill="url(#SVG)" stroke="#000000" stroke-width="0" x="0" y="12">TESTO</text></g>
</svg>