Atributo de espaciado de letras SVG

El atributo de espaciado entre letras controla el espaciado entre caracteres de texto, es decir, aumenta o disminuye el espacio entre caracteres en un texto.

Sintaxis:

letter-spacing = keyword-values | length-values | global-values

Valores de atributo: el atributo de espaciado entre letras acepta tres valores mencionados anteriormente y descritos a continuación:

  • valores-palabra clave: este valor de atributo incluye valores como normal .
  • valores de longitud: este valor de atributo incluye valores como em, px, etc.
  • valores globales: este valor de atributo incluye valores como heredar, inicial y no establecido.

Nota: El valor predeterminado de espaciado entre letras es normal

Los siguientes ejemplos ilustran el uso del atributo de espaciado entre letras en SVG.

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green; 
              margin-left: 150px;
              font-size: 25px;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="0 5 700 30" 
        xmlns="http://www.w3.org/2000/svg">
          
        <text y="20" letter-spacing="2">
            It is a Computer Science portal.
        </text>
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green; 
            margin-left: -5px;
            font-size: 25px;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="0 0 700 30" 
        xmlns="http://www.w3.org/2000/svg">
          
        <text y="20" letter-spacing="-1">
            It is a Computer Science portal.
        </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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *