Buscar..
Parámetros
<text> | Detalles |
|---|---|
| X | La posición x del texto. |
| y | La posición y del texto. |
| dx | Cambio relativo en la posición x. |
| dy | Cambio relativo en posición y. |
| girar | Especifica el desplazamiento angular de los glifos de texto. |
| textLength | Se adapta al texto en la longitud dada. |
| longitud Ajustar | Especifica si solo el kerning o kerning y los glifos se comprimen / estiran para ajustar el texto en textLength especificado. Valores: espaciado o espaciado y glifos |
| - | Parámetros comunes a todos los elementos de fragmentación de texto (text, tref, textPath, tspan) |
| ancla de texto | Especifica la alineación horizontal. Valores: inicio, medio, final. |
| cambio de línea de base | Desplaza la línea de base del texto en función de los valores proporcionados por la tabla de fuentes para el posicionamiento del superíndice o subíndice (sub, super) o por un% o longitud positivo o negativo. Valores: sub, super,% o longitud. |
Observaciones
baseline-shift no es compatible con las versiones más actuales de los navegadores Firefox y Microsoft a partir de julio de 2016.
Dibujar texto
<svg xmlns="http://www.w3.org/2000/svg">
<text x="40" y="60" font-size="28">Hello World!</text>
</svg>
Las coordenadas x e y especifican la posición de la esquina inferior izquierda del texto (a menos que se haya modificado el anclaje de texto).
Superíndice y subíndice
Usando el parámetro de cambio de línea de base, puede especificar super o subíndice. Pero esto no es compatible con todos los principales navegadores.
<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>
Para una solución de navegador cruzado, puede usar dy, dx y el tamaño de fuente relativo.
<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>
Rotar texto
La propiedad rotar gira cada carácter según el ángulo especificado.
<svg xmlns="http://www.w3.org/2000/svg">
<text x="10" y="20" rotate="30">Each character is rotated</text>
</svg>
Para rotar todo el elemento de texto, debe usar la propiedad de transformación.
<svg xmlns="http://www.w3.org/2000/svg">
<text transform="translate(10, 60) rotate(30)">The whole text is rotated</text>
</svg>
Posicionamiento individual de letras con matrices de valores X e Y
<svg width="400px" height="200px">
<text x="1em, 2em, 3em, 4em, 5em" y="3em, 4em, 5em">
Individually Spaced Text
</text>
</svg>
El elemento Texto admite la colocación individual de letras al aceptar una matriz de valores para x e y.