Atributo de trazo-dasharray de SVG

El atributo stroke-dasharray es un atributo de presentación que define el patrón de guiones utilizados para pintar el contorno de la forma.

Sintaxis:

stroke-dasharray="number pattern"

Valores de atributos:

dasharray: El patrón de trazo que tendrá.

Usaremos el atributo stoke-dasharray para establecer el patrón del trazo.

Ejemplo 1: En este ejemplo, usaremos el atributo trazo-raya para establecer el patrón de la línea.

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 50 20" 
         xmlns="http://www.w3.org/2000/svg">
  
        <line x1="0" y1="1" x2="30" y2="1" stroke="green" />
  
        <line x1="0" y1="3" x2="30" y2="3" stroke="green"
        stroke-dasharray="4 1 2 3" />
    </svg>
</body> 
  
</html>

Producción:

Ejemplo 2: En este ejemplo, usaremos el atributo stroke-dasharray para establecer el patrón del círculo

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 50 21" 
         xmlns="http://www.w3.org/2000/svg">
  
        <circle x="12" y="3" r="5" 
                cx="10" cy="10" stroke="green"/>
  
        <circle x="12" y="3" r="5" 
                cx="25" cy="10" stroke="green"
        stroke-dasharray="4 1 2 3" />
    </svg>
</body> 
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta