Testo in SVG
Informazioni sul Tutorial (autore, data di revisione, ...)
Ultima data di revisione:
Autore Tutorial King Kaito Kid, membro del Team Invisible
Tutorial di XML
Come creare un testo in SVG e un testo su più linee. Inoltre vediamo come impostare delle unità di misura relative ai punti X ed Y con un esempio pratico e simpatico
Leggi il Tutorial
Introduzione
In SVG è possibile inserire anche il testo, quindi potenzialmente potete costruire il vostro logo mediante SVG ed inserire il vostro testo.
Testo in SVG
Per inserire un testo nel vostro SVG è semplice perché l'elemento è
text
come mostrato di seguitoNon è una cosa intuitiva però è semplice, potete mettere anche l'attributo
transform
per ruotare il testo (ad esempio).Discorso diverso se volete fare un testo che occupa più di una linea, in tal caso si apre il tag SVG di
text
come sopra ma ha dei figli che sono tspan
che rappresentano le varie righe del testoTesto con X ed Y relative, esempio pratico
Sarebbe tutto comodo se nel mondo ci fossero stessi display con medesime dimensioni ma... Non è così e quindi ci dobbiamo adeguare.
Vi ricordate l'esempio della luna che abbiamo fatto nel Tutorial precedente??
Vogliamo che nella parte mancante della luna ci sia una scritta però... Dovremmo fare tutto con X ed Y cosa davvero scomoda perché noi vogliamo un logo che sia grande allo stesso modo su tutti i display e non solo sul nostro, quindi dobbiamo usare unità di misura relative che se non sapete trovate un Tutorial dedicato.
In CSS c'è una proprietà che si chiama
transform
e ha un valore che si chiama translate(x, y)
e translate3d(x, y, z)
che vi permettono di inserire X, Y (e Z se volete una terza dimensione) usando unità di misura che voi volete, scrivere transform: translate(10vw, 10vh)
significa che sto posizionando la X al 10% della ViewportWidth e la Y al 10% della ViewportHeight.Luna con la nostra scritta
Mostra / Nascondi il codice
<svg style="width: 53vw; height: 55vh;">
<circle style="r:4vw; cx:5vw; cy:10vh; fill:yellow; stroke-width:0.1vw; stroke:gray;" />
<circle style="r:3vw; cx:6.18vw; cy:10vh; fill:#A5D6A7; stroke-width:0.1vw; stroke:gray;" />
<circle style="r:2.4vw; cx:7vw; cy:10vh; fill:#A5D6A7; stroke-width:0.1vw; stroke:#A5D6A7;" />
<text style="transform: translate(4vw, 10vh);" fill="red">King Kaito Kid</text>
</svg>
Altri Tutorial di questo linguaggio
Qui vengono mostrati tutti i Tutorial riguardo XML, la pagia viene aggiornata.
Se vuoi cambiare linguaggio puoi farlo da questa pagina: Elenco dei Tutorial
FAQ | Curiosità
Se hai delle domande da fare usa la sezione dedicata e se la domanda viene posta tante volte o è importante apparirà in questa sezione dedicata alle domande.
Hai una domanda? | Contattaci
Scrivici la domanda e come vuoi essere ricontattato
Puoi comunicare con noi in modo diretto ma RICORDA che se vuoi essere contattato devi indicarci come farlo perché tutte le domande che ci arrivano sono tutte anonime.