Digamos que tienes una línea en SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Puede utilizar el stroke-dasharray propiedad en CSS para hacer guiones:
line {
stroke-dasharray: 5;
}Esa 5 el valor es una unidad relativa basada en el tamaño de los SVG viewBox. Podríamos usar cualquier longitud de CSS, de verdad. Pero lo que hace es crear un patrón de guiones de 5 unidades de largo con espacios de 5 unidades 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í? Va:
- Guión: 5 unidades
- Brecha: 10 unidades
- Guión: 15 unidades
Uno pensaría que se repite después de eso exactamente con la misma cadencia. ¡Pero no! Si lo hiciera, tendríamos guiones chocando entre sí:
- Guión: 5 unidades
- Brecha: 10 unidades
- Guión: 15 unidades
- Guión: 5 unidades
- Brecha: 10 unidades
- Guión: 15 unidades
- …y así.
En su lugar, stroke-dasharray se vuelve inteligente y duplica el patrón si hay un número impar de valores Entonces...
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;¡Es por eso que funciona un solo valor! Anteriormente, declaramos un único 5 valor. Eso es realmente lo mismo que decir stroke-dasharray: 5 5. Sin el segundo valor, stroke-dasharray duplica implícitamente el primer valor para obtener un patrón repetible. De lo contrario, solo sería 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 forma en sí. Nuestro SVG line son 500 unidades. Pongámoslo más grande stroke-dasharray valores y sumarlos:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Si el patrón se ejecuta cuatro veces (150 unidades ⨉ 4 iteraciones), estamos tratando con 600 unidades en total. Esas 100 unidades adicionales se cortan para evitar que el patrón se desborde.
Eso es todo.
🎩 Punta de sombrero para josué danza para llamando a esto!
