Cómo funcionan los patrones de trazos y guiones | trucos CSS

Digamos que tienes una línea en SVG:

<svg>
  <line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>

Puedes usar stroke-dasharray propiedad en CSS para hacer guiones:

line {
  stroke-dasharray: 5;
}

Che 5 el valor es una unidad relativa basada en el tamaño del SVG viewBoxPodemos usar cualquier longitud de CSS, de verdad. Pero lo que hace es hacer un patrón de guiones de 5 unidades de largo con 5 unidades de espacio entre ellos.

Hasta aquí todo bien. Podemos usar dos valores, donde el segundo valor establece individualmente la longitud del espacio:

Ahora tenemos guiones que son 5 unidades y espacios que son 10. Probemos con un tercer valor:

¿Ves cómo estamos formando un patrón aquí?

• Guión: 5 unidades
• Diferencia: 10 unidades
• Guión: 15 unidades

Uno pensaría que se repite después exactamente con la misma cadencia. ¡Pero no! Si lo hiciera, tendríamos guiones chocando entre sí:

• Guión: 5 unidades
• Diferencia: 10 unidades
• Guión: 15 unidades
• Guión: 5 unidades
• Diferencia: 10 unidades
• Guión: 15 unidades
• …y así.

En cambio, stroke-dasharray hace que todo sea inteligente y duplica el patrón si hay un número impar de valores, así que…

stroke-dasharray: 5 10 15;

/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;

¡Es por eso que el valor único realmente funciona! Antes nos declaramos solteros 5 valor Esto es realmente lo mismo que decir stroke-dasharray: 5 5Sin el segundo valor, stroke-dasharray duplica implícitamente el primer valor para obtener un patrón repetible. De lo contrario, solo será una línea sólida de guiones de 5 unidades de largo, ¡pero sin espacios entre ellos!

El patrón también depende del tamaño de la figura en sí Nuestro SVG line es de 500 unidades. Hagámoslo más grande stroke-dasharray valores y sumarlos:

stroke-dasharray: 10 20 30 40 50; /* 150 units */

Si el modelo se ejecuta cuatro veces (150 unidades ⨉ 4 iteraciones), estamos tratando con un total de 600 unidades. Estas 100 unidades adicionales se recortan para evitar que se sobrellene el patrón.

Eso es todo.

🎩 punta de sombrero josué danza por llamándolo!