Una de las potentes capacidades de SVG es que puede controlar el texto a un nivel que es imposible para las páginas HTML estándar sin la necesidad de recurrir a imágenes u otros complementos. Cualquier acción que se pueda realizar en una forma o ruta (como dibujo o filtrado) se puede realizar en el texto. Aunque la representación de texto de SVG es tan poderosa, todavía hay una desventaja: SVG no puede realizar una envoltura de línea automática. Si el texto es más largo que el espacio permitido, simplemente córtelo. En la mayoría de los casos, crear múltiples líneas de texto requiere múltiples elementos de texto.
Además, puede usar el elemento TSPAN para dividir el elemento de texto en secciones, lo que permite que cada sección tenga su propio estilo.
Además, en los elementos de texto, el procesamiento de espacios es similar a HTML: las roturas de línea y los retornos de carro se convierten en espacios, mientras que múltiples espacios se comprimen en un solo espacio.
Texto que se muestra directamente en la imagen - Elemento de texto Para mostrar texto directamente, puede usar elementos de texto, de la siguiente manera:<svg>
<rect relleno = "rojo" />
<círculo cx = "150" cy = "100" r = "80" relleno = "verde" />
<Text x = "150" y = "125" font-size = "60" text-anchor = "Middle" Fill = "White"> Svg </Text>
</svg>
Como se muestra en el ejemplo anterior, el elemento de texto puede establecer las siguientes propiedades:
x, y son las coordenadas de posición de texto. Text-amplio es la dirección de la pantalla de texto, que en realidad es la posición (x, y) en la posición del texto. Esta propiedad tiene tres valores: inicio, medio y final. Inicio significa que la posición de la posición del texto (x, y) se encuentra al comienzo del texto, y el texto se muestra uno por uno a la derecha a partir de este punto. Los medios intermedios (x, y) se encuentran en el medio del texto, y el texto se muestra en las direcciones izquierda y derecha, que en realidad está centrada. End significa que (x, y) los puntos están al final del texto, y el texto se muestra uno por uno a la izquierda.Además de estas propiedades, las siguientes propiedades se pueden especificar en CSS o directamente en las propiedades:
Llenar, accidente cerebrovascular: colores de relleno y trazo, el uso específico se resume más adelante. Atributos relacionados de fuentes: fuente-familia, estilo fuente, peso de fuente, variante de fuente, estiramiento de fuente, tamaño de fuente, ajuste-ajuste, kerning, espaciado de letras, espacios de palabras y decoración de texto. Intervalo de texto - Elemento Tspan Este elemento es un poderoso complemento del elemento de texto; Se usa para representar el texto dentro de un intervalo; Solo puede aparecer en el elemento de texto o en los elementos infantiles del elemento TSPAN. Un uso típico es enfatizar la visualización de la parte del texto. Por ejemplo:<Exto>
<tspan font-weight = "bold" relleno = "rojo"> Esto es audaz y rojo </span>
</ext>
El elemento TSPAN tiene las siguientes propiedades que se pueden establecer: x, y se usa para establecer el valor de coordenada absoluta del texto contenido, que anulará la posición de texto predeterminada. Estas propiedades pueden contener una serie de números que se aplican a cada carácter único correspondiente. Los caracteres que no tienen configuraciones correspondientes seguirán al personaje anterior. Por ejemplo:
<Text x = "10" y = "10"> ¡Hola mundo!
<tspan x = "100 200 300" font-weight = "bold" relleno = "rojo"> Esto es audaz y rojo </span>
</ext>
DX, DY se usa para establecer el desplazamiento del texto contenido en relación con la posición de texto predeterminada. Estas propiedades también pueden contener una serie de números, cada uno aplicado al carácter correspondiente. Los caracteres que no tienen configuraciones correspondientes seguirán al personaje anterior. Puede cambiar X del ejemplo anterior a DX para ver el efecto. Rotar se usa para establecer el ángulo de rotación de la fuente. Esta página de propiedad puede contener una serie de números que se aplican a cada carácter. Los caracteres que no tienen configuraciones correspondientes usarán el último conjunto de números.
<Text x = "10" y = "10"> ¡Hola mundo!
<tspan rotate = "10 20 45" font-weight = "bold" relleno = "rojo"> Esto es audaz y rojo </span>
</ext>
TextLength: esta es la propiedad más desconcertante. Se dice que después de configurarlo, cuando la representación encuentra que la longitud del texto es inconsistente con este valor, esta longitud será la base. Pero no lo probé. Cita de texto - Elemento TRF
Este elemento permite la referencia para el texto definido y copiarlo de manera eficiente en la ubicación actual, generalmente con el elemento de destino XLINK: HREF especificado. Debido a que se copió, cuando se usa CSS para modificar el texto actual, el texto original no se modificará. Ver ejemplo:
<Text id = "Ejemplo"> Este es un texto de ejemplo. </ext>
<Exto>
<tref xlink: href = "#ejemplo" />
</ext>
Ruta de texto - Elemento de Path Path Esto es más interesante, el efecto también es genial y puede producir muchos efectos artísticos; Este elemento toma la ruta especificada desde su atributo xlink: href y alinea el texto en esta ruta, vea el ejemplo:<Path id = "my_path" d = "m 20,20 C 40,40 80,40 100,20" />
<Exto>
<TextPath xlink: href = "#my_path"> Este texto sigue una curva. </textPath>
</ext>
Renderización de imagen en SVG - Elemento de imagen El elemento de imagen en SVG puede admitir directamente la visualización de imágenes ráster, que es muy fácil de usar. Vea el siguiente ejemplo:<svg>
<Imagen xlink: href = "penguins.jpg" x = "0" y = "0"/>
</svg>
Algunos puntos a tener en cuenta aquí :1. Si las coordenadas X o Y no están configuradas, el valor predeterminado es 0.
2. Si no se establece el ancho o la altura, el valor predeterminado es 0.
3. Si el ancho o la altura se establecen explícitamente en 0, se prohibirá la representación de esta imagen.
4. El formato de imagen admite PNG, JPEG, JPG, SVG, etc., por lo que SVG admite SVG anidado.
5. La imagen es un elemento regular de SVG, al igual que otros elementos, por lo que admite todos los efectos, como recortar, enmascarar, filtrar, rotación, etc.
Referencia práctica:Índice de script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Centro de desarrollo: https://developer.mozilla.org/en/svg
Referencia popular: http://www.chinasvg.com/
Documento oficial: http://www.w3.org/tr/svg11/