Como funcionam os padrões de traço-dasharray PlatoBlockchain Data Intelligence. Pesquisa Vertical. Ai.

Como funcionam os padrões de traço-dasharray

Carimbo de data / hora: 15 de julho de 2022, 3h43

Digamos que você tenha uma linha em SVG:

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

Você pode usar o stroke-dasharray propriedade em CSS para fazer traços:

line {
  stroke-dasharray: 5;
}

Êxtase  5 valor é uma unidade relativa baseada no tamanho dos SVGs viewBox. Poderíamos usar qualquer comprimento CSS, na verdade. Mas o que ele faz é criar um padrão de traços com 5 unidades de comprimento com 5 espaços de unidade entre eles.

Até agora tudo bem. Podemos usar dois valores em que o segundo valor define individualmente o comprimento do intervalo:

Agora temos traços que são 5 unidades e espaços que são 10. Vamos tentar um terceiro valor:

Vê como estamos formando um padrão aqui? Vai:

  • Traço: 5 unidades
  • Espaço: 10 unidades
  • Traço: 15 unidades

Você pensaria que se repete depois disso na mesma cadência. Mas não! Se isso acontecesse, teríamos traços esbarrando um no outro:

  • Traço: 5 unidades
  • Espaço: 10 unidades
  • Traço: 15 unidades
  • Traço: 5 unidades
  • Espaço: 10 unidades
  • Traço: 15 unidades
  • …e assim por diante.

Em vez disso, stroke-dasharray fica todo inteligente e duplica o padrão se houver um número ímpar de valores Então…

stroke-dasharray: 5 10 15;

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

Na verdade, é por isso que um único valor funciona! Anteriormente, declaramos um único 5 valor. Isso é realmente o mesmo que dizer stroke-dasharray: 5 5. Sem o segundo valor, stroke-dasharray duplica implicitamente o primeiro valor para obter um padrão repetível. Caso contrário, seria apenas uma linha sólida de traços com 5 unidades de comprimento, mas sem lacunas entre eles!

O padrão também depende do tamanho da própria forma. Nosso SVG line é de 500 unidades. Vamos definir maior stroke-dasharray valores e some-os:

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

Se o padrão for executado quatro vezes (150 unidades ⨉ 4 iterações), estamos lidando com um total de 600 unidades. Essas 100 unidades adicionais são cortadas para evitar que o padrão transborde.

Isso é tudo.

🎩 Dica de chapéu para Dança de Josué para chamando isso!

Carimbo de hora:

Mais de Truques CSS