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 seguito

Tutorial by King Kaito Kid

Non è 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 testo

Tutorial by>King Kaito Kid



Testo 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
King Kaito Kid
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à
Non sono state poste domande su questo Tutorial al momento.
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.