Lavorare con il testo in Scalable Vector Graphics (SVG)
Nei nostri post precedenti, abbiamo utilizzato SVG per creare forme. In questo post, come ha detto il titolo, esamineremo creare testo con SVG. Ci sono molte cose che possiamo fare con il testo oltre a quello che il semplice testo HTML è in grado di fare.
Quindi, controlliamoli.
Implementazione di base
Ma, prima di andare oltre, vediamo come Testo in SVG è formato al suo livello di base:
Il testo in SVG, come puoi vedere dallo snippet di codice precedente, è definito con un tag sufficientemente logico, X e y attributi per specificare le coordinate della linea di base.
Fonte immagine: Wikipedia.org
Ed ecco come sarà il testo. Per ora sembra che non abbia alcuna differenza con il testo normale in HTML.
Stili di testo di base
Il testo può anche essere abbinato a proprietà CSS come font-weight, stile del font, e text-decoration che può essere implementato attraverso in stile interno, stile interno o -Stile esterno come abbiamo discusso nel post precedente su Styling SVG con CSS. Ecco alcuni esempi.
Grassetto
Questo è testo in Scalable Vector Graphic (SVG)
Corsivo
Questo è testo in corsivo in Scalable Vector Graphic (SVG)
Sottolineare
Questo è il testo sottolineato in Scalable Vector Graphic (SVG)
Elemento
In alcuni casi, quando vogliamo applicare solo stili o attributi a una porzione particolare del testo, possiamo utilizzarli
Questo è audace ,questo è in corsivo equesto è sottolineato
Modalità di scrittura
Il testo non è solo scritto da da sinistra a destra. In altre parti del mondo, per esempio in Giappone, il testo è scritto da dall'alto al basso. In SVG, questo può essere fatto usando il writing-mode attributo.
ぁ ぃ ぅ ぇ ぉ か き
Nell'esempio sopra, abbiamo inserito diversi caratteri giapponesi casuali (non chiedermi il loro significato, non ne ho davvero idea) e cambia l'orientamento con questa dichiarazione di stile, modalità di scrittura: tb, dove tb sta per dall'alto al basso.
Struttura del testo
Il testo in SVG è fondamentalmente un grafico, quindi possiamo anche applicare il ictus attributo per aggiungere una linea di confine al testo proprio come abbiamo fatto con le altre forme.
Nello snippet di codice sopra riportato, abbiamo aggiunto il ictus attributo al riempire attribuire a nessuna che risulterà nella seguente presentazione di testo.
Percorso del testo
In SVG, il testo non è solo in grado di essere visualizzato orizzontalmente e verticalmente, ma può anche seguire un modello Path. Ecco come farlo.
Innanzitutto, dobbiamo definire il sentiero. Tuttavia, la creazione di un percorso direttamente in HTML non è così intuitiva, abbiamo bisogno di capire le coordinate e alcuni comandi che sono sicuro che la maggior parte di noi cercherà di evitare. Quindi, per semplificare questo passaggio, suggerisco personalmente di aprire un editor vettoriale (Inkscape o Illustrator), creare un percorso e generare il codice SVG.
Quindi, metti il defs qui significa definizione.
Si noti che abbiamo anche aggiunto un id attributo al id al nostro testo con
Lorem ipsum dolor sit amet consectetur.
Ulteriori letture: Percorsi SVG
Gradiente di testo
L'aggiunta di uno sfondo per riempire il testo è anche possibile in SVG, e se sei riuscito nella sezione Percorso del testo sopra, questo sarebbe molto più facile.
Per prima cosa, dobbiamo definire i colori del gradiente.
Quando vengono impostate tutte le definizioni necessarie, ora dobbiamo solo aggiungere il testo e fare riferimento al riempire attributo al gradiente id attributo, come segue;
Pendenza
Ed eccolo, il testo con gradiente.
Ulteriori letture: Gradiente SVG e Pattern
Ulteriori riferimenti
Il testo in SVG è indubbiamente potente, in realtà ci sono molte cose che siamo in grado di fare oltre a ciò che possiamo accogliere in questo post. Quindi, di seguito abbiamo messo insieme alcuni altri riferimenti per servire il vostro interesse in questo argomento.
- Informazioni sui font in SVG - Divya Manian
- Documentazione ufficiale di testo SVG - W3.org
- SVG Dovumentation presso Mozilla Dev. Rete con esempi e strumenti - MDN
- Attributo della modalità di scrittura SVG - MDN
- Visualizza la demo
- Scarica fonte
