Come Creare un Testo con colore sfumato usando SVG
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.
Codice HTML:
<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
Codice:
<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
Codice:
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
Codice HTML:
<svg height="300" width=300""></svg>
si creano i TAG per le definizioni
Codice HTML:
<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
Codice HTML:
<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
Codice HTML:
<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
Codice HTML:
<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>