El atributo de decoración de texto define si el texto se escribe con tachado, sobrerayado y/o subrayado. La principal diferencia entre la propiedad de decoración de texto CSS y el atributo de decoración de texto SVG es que SVG utiliza los valores de ‘ relleno ‘ y ‘ trazo ‘ para pintar las decoraciones de texto. Solo tiene efecto en los siguientes elementos <altGlyph>, <text>, <textPath>, <tref> y <tspan>.
Sintaxis:
text-decoration = "text-decoration-line" | "text-decoration-style"
| "text-decoration-color"
Valores de atributo: el atributo de decoración de texto acepta los valores mencionados anteriormente y descritos a continuación.
- text-decoration-line: Establece text-decoration , a line-through o underline .
- text-decoration-style: Establece el estilo de la línea utilizada para la decoración, como sólido , ondulado o discontinuo .
- text-decoration-color: Establece el color de la decoración.
Ejemplo 1: Los siguientes ejemplos ilustran el uso del atributo de decoración de texto .
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; font-size: 40px;"> GeeksforGeeks </h1> <p> Example for text-decoration="underline" </p> <svg viewBox="0 0 450 250" xmlns="http://www.w3.org/2000/svg"> <text y="20" text-decoration="underline"> GeeksforGeeks </text> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; font-size: 40px;"> GeeksforGeeks </h1> <p> Example for text-decoration="line-through" </p> <svg viewBox="0 0 450 250" xmlns="http://www.w3.org/2000/svg"> <text x="0" y="40" text-decoration="line-through"> GeeksforGeeks </text> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA