CSS | propiedad stroke-dashoffset

La propiedad stroke-dashoffset se usa para establecer la ubicación a lo largo de una ruta SVG donde comenzará el patrón de trazos de un trazo. Un valor más alto significa que el guión comenzará en una ubicación posterior.

Sintaxis:

stroke-dasharray: <length> | <percentage>

Valores de propiedad:

longitud: Se utiliza para establecer el desplazamiento en unidades de longitud. Los valores se resuelven sobre la base de la longitud de ruta del elemento.

Ejemplo 1: Establecer el desplazamiento de los guiones en las líneas.

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS | stroke-dashoffset
  </title>
  <style>
    .stroke1 {
      stroke-dashoffset: 0;
  
      stroke: green;
      stroke-dasharray: 40;
      stroke-width: 20px;
    }
  
    .stroke2 {
      stroke-dashoffset: 15px;
  
      stroke: red;
      stroke-dasharray: 40;
      stroke-width: 20px;
    }
  
    .stroke3 {
      stroke-dashoffset: 30px;
  
      stroke: orange;
      stroke-dasharray: 40;
      stroke-width: 20px;
    }
  </style>
</head>
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    CSS | stroke-dashoffset
  </b>
  <div class="container">
    <svg width="400px"
      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:
usando-líneas

Ejemplo 2: Establecer el desplazamiento de los guiones en círculos.

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS | stroke-dashoffset
  </title>
  <style>
    .stroke1 {
      stroke-dashoffset: 0;
  
      stroke: green;
      stroke-dasharray: 40;
      stroke-width: 10px;
    }
  
    .stroke2 {
      stroke-dashoffset: 15px;
  
      stroke: red;
      stroke-dasharray: 40;
      stroke-width: 10px;
    }
  
    .stroke3 {
      stroke-dashoffset: 30px;
  
      stroke: orange;
      stroke-dasharray: 40;
      stroke-width: 10px;
    }
  </style>
</head>
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    CSS | stroke-dashoffset
  </b>
  <div class="container">
    <svg width="500px" height="250px"
      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:
usar círculos

porcentaje: Se utiliza para establecer el desplazamiento en valores porcentuales. Los valores se resuelven como un porcentaje de la ventana gráfica actual.

Ejemplo: Establecer el desplazamiento de los guiones en las líneas.

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS | stroke-dashoffset
  </title>
  <style>
    .stroke1 {
      stroke-dashoffset: 0%;
  
      stroke: green;
      stroke-dasharray: 40;
      stroke-width: 20px;
    }
  
    .stroke2 {
      stroke-dashoffset: 50%;
  
      stroke: red;
      stroke-dasharray: 40;
      stroke-width: 20px;
    }
  
    .stroke3 {
      stroke-dashoffset: 100%;
  
      stroke: orange;
      stroke-dasharray: 40;
      stroke-width: 20px;
    }
  </style>
</head>
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    CSS | stroke-dashoffset
  </b>
  <div class="container">
    <svg width="400px"
      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:
líneas porcentuales

Navegadores compatibles: los navegadores compatibles con la propiedad stroke-dashoffset 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