Atributo de espaciado de palabras SVG

El atributo de espacio entre palabras en SVG se usa para indicar el espacio entre palabras. Este espacio se puede cambiar utilizando el valor de longitud del atributo. 

Cuando la longitud se menciona sin un identificador de unidad, el navegador lo procesa como un valor de ancho en el sistema de coordenadas del usuario actual; de lo contrario, si se menciona con uno de los identificadores de unidad, el navegador lo convierte en un valor correspondiente en el sistema de coordenadas de usuario actual. sistema de coordenadas del usuario.

Nota: este atributo se puede aplicar a cualquier elemento, pero solo tiene efecto en los elementos <altGlyph>, <text>, <textPath>, <tref> y <tspan > .

Sintaxis:

word-spacing ="length"

Valor de atributo: este atributo acepta un solo valor como se mencionó anteriormente y se describe a continuación:

  • longitud: Es un número que especifica el espacio entre las palabras. Puede ser seguido por una de las unidades de longitud como px, cm, mm, pt, etc.

Los siguientes ejemplos ilustran el uso del atributo de espacio entre palabras :

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green; font-size:50px; 
               text-align:center;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="0 0 450 150" 
        xmlns="http://www.w3.org/2000/svg">
          
        <text y="15" word-spacing="10">
            GeeksforGeeks is a Computer 
            Science portal
        </text>
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green; font-size:50px; 
               text-align:center;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="0 0 450 150" 
        xmlns="http://www.w3.org/2000/svg">
      
        <text x="0" y="40" word-spacing="-10">
            GeeksforGeeks 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 *