Ricerca…
Parametri
<text> | Dettagli |
|---|---|
| X | La posizione x del testo. |
| y | La posizione y del testo. |
| dx | Spostamento relativo in posizione x. |
| dy | Spostamento relativo in posizione y. |
| ruotare | Specifica lo spostamento angolare per glifi di testo. |
| textLength | Adatta il testo alla lunghezza specificata. |
| lengthAdjust | Specifica se solo crenatura o crenatura e glifi vengono compressi / stirati per adattare il testo alla lunghezza del testo specificata. Valori: spaziatura o spaziaturaAndGlyphs |
| - | Parametri comuni a tutti gli elementi di suddivisione del testo (testo, tref, textPath, tspan) |
| text-anchor | Specifica l'allineamento orizzontale. Valori: inizio, metà, fine. |
| basale-shift | Sposta la baseline del testo in base a entrambi i valori forniti dalla tabella font per il posizionamento in apice o pedice (sub, super) o in percentuale o lunghezza positiva o negativa. Valori: sub, super,% o lunghezza. |
Osservazioni
baseline-shift non è supportato dalle versioni più recenti dei browser Firefox e Microsoft a luglio 2016.
Disegna il testo
<svg xmlns="http://www.w3.org/2000/svg">
<text x="40" y="60" font-size="28">Hello World!</text>
</svg>
La coordinata xey specifica la posizione dell'angolo in basso a sinistra del testo (a meno che l'ancoraggio del testo non sia stato modificato).
Super e pedice
Utilizzando il parametro spostamento di linea di base, è possibile specificare super- o pedice. Ma questo non è supportato da tutti i principali browser.
<svg xmlns="http://www.w3.org/2000/svg">
<text x="10" y="20">x<tspan baseline-shift="super">2</tspan></text>
<text x="10" y="60">f<tspan baseline-shift="sub">x</tspan></text>
</svg>
Per una soluzione cross-browser, è possibile utilizzare dy, dx e la dimensione del carattere relativa.
<svg xmlns="http://www.w3.org/2000/svg">
<text x="10" y="40">x<tspan dy="-7" font-size=".7em">2</tspan></text>
<text x="10" y="80">f<tspan dy="3" font-size=".7em">x</tspan></text>
</svg>
Ruota il testo
La proprietà rotate ruota ciascun carattere per l'angolo specificato.
<svg xmlns="http://www.w3.org/2000/svg">
<text x="10" y="20" rotate="30">Each character is rotated</text>
</svg>
Per ruotare l'intero elemento di testo, devi usare la proprietà transform.
<svg xmlns="http://www.w3.org/2000/svg">
<text transform="translate(10, 60) rotate(30)">The whole text is rotated</text>
</svg>
Posizionamento di singole lettere con matrici di valori X e Y.
<svg width="400px" height="200px">
<text x="1em, 2em, 3em, 4em, 5em" y="3em, 4em, 5em">
Individually Spaced Text
</text>
</svg>
L'elemento Testo supporta il posizionamento individuale di lettere accettando una matrice di valori per x e y.