CSS | propiedad trazo-dasharray

La propiedad stroke-dasharray se usa para establecer el patrón de guiones y espacios usados en el trazo de las formas SVG. Un valor mayor indica un mayor número de guiones. Se pueden especificar diferentes valores en el parámetro de array para cambiar el patrón.

Sintaxis:

stroke-dasharray: <dasharray> | none

Valores de propiedad:

dasharray: Se utiliza para establecer el patrón con una lista de valores separados por comas o espacios en blanco. Los valores pueden ser tanto en términos de unidades de longitud como de porcentajes que especifican los guiones y los espacios en el patrón.

Ejemplo 1: Configuración de la densidad de los guiones en las líneas.

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS | stroke-dasharray property
  </title>
  <style>
    .stroke1 {
      stroke-dasharray: 20;
  
      stroke: green;
      stroke-width: 20;
    }
  
    .stroke2 {
      stroke-dasharray: 40;
  
      stroke: red;
      stroke-width: 20;
    }
  
    .stroke3 {
      stroke-dasharray: 80;
  
      stroke: orange;
      stroke-width: 20;
    }
  </style>
</head>
  
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    CSS | stroke-dasharray
  </b>
  <div class="container">
    <svg height="250px" width="500px"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1">
      <line class="stroke1" x1="0"
        x2="350" y1="20" y2="20" />
      <line class="stroke2" x1="0"
        x2="350" y1="70" y2="70" />
      <line class="stroke3" x1="0"
        x2="350" y1="120" y2="120" />
    </svg>
  </div>
</body>
</html> 

Producción:
eg-line

Ejemplo 2: Configuración de la densidad de los guiones en círculos.

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS | stroke-dasharray property
  </title>
  <style>
    .stroke1 {
      stroke-dasharray: 10;
  
      stroke: green;
      stroke-width: 20;
    }
  
    .stroke2 {
      stroke-dasharray: 20;
  
      stroke: red;
      stroke-width: 20;
    }
  
    .stroke3 {
      stroke-dasharray: 40;
  
      stroke: orange;
      stroke-width: 20;
    }
  </style>
</head>
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    CSS | stroke-dasharray
  </b>
  <div class="container">
    <svg height="250px" width="500px"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1">
      <circle class="stroke1" cx="100"
        cy="100" r="50"/>
      <circle class="stroke2" cx="250"
       cy="100" r="50"/>
      <circle class="stroke3" cx="400"
       cy="100" r="50"/>
    </svg>
  </div>
</body>
</html>

Producción:
eg-circle

Ejemplo 3: Configuración del patrón de los guiones.

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS | stroke-dasharray property
  </title>
  <style>
    .stroke1 {
      stroke-dasharray: 20;
  
      stroke: green;
      stroke-width: 20;
    }
  
    .stroke2 {
      /* pattern with even number
      of values */ 
      stroke-dasharray: 40 20;
  
      stroke: red;    
      stroke-width: 20;
    }
  
    .stroke3 {
      /* pattern with odd number
      of values */ 
      stroke-dasharray: 80 40 20;
  
      stroke: orange;
      stroke-width: 20;
    }
  </style>
</head>
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    CSS | stroke-dasharray
  </b>
  <div class="container">
    <svg height="250px" width="500px"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1">
      <line class="stroke1" x1="0"
        x2="350" y1="20" y2="20" />
      <line class="stroke2" x1="0"
        x2="350" y1="70" y2="70" />
      <line class="stroke3" x1="0"
        x2="350" y1="120" y2="120" />
    </svg>
  </div>
</body>
</html>

Producción:
eg-line-pattern

ninguno: se utiliza para especificar que no se utilizará ningún patrón. Es el valor predeterminado.

Navegadores compatibles: los navegadores compatibles con la propiedad stroke-dasharray se enumeran a continuación:

Cromo
Firefox
Safari
Ópera
explorador de Internet 9

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta