A stroke-dasharraypropriedade em CSS serve para criar travessões no traço de formas SVG. Quanto mais alto o número, mais espaço entre os traços do traço.
.module ( stroke-dasharray: 5; )Lembrar:
- Isto irá substituir um atributo de apresentação
- Isso não substituirá um estilo embutido, por exemplo
Valores
A stroke-dasharraypropriedade pode aceitar qualquer comprimento, incluindo valores sem unidade:
stroke-dasharray: 2stroke-dasharray: 2.5stroke-dasharray: 2emstroke-dasharray: 15%
Valores sem unidade são provavelmente a escolha mais comum, como geralmente acontece com valores SVG. Eles se tornam unidades de comprimento que são relativas ao sistema de coordenadas configurado pelo viewBox.
Veja a propriedade Pen stroke-dasharray por CSS-Tricks (@ css-tricks) em CodePen.
Ficar complicado com stroke-dasharray
Você já viu aquelas demonstrações legais em que uma forma SVG parece se desenhar? Esse é um truque que pega o stroke-dasharrayde um elemento e o anima em conjunto com a stroke-dashoffsetpropriedade.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Veja o exemplo básico da caneta de desenho de linha SVG, para trás e para a frente por Chris Coyier (@chriscoyier) no CodePen.
Cobrimos essa técnica com muito mais detalhes neste post. Parece que o IE 11 em diante não gosta de animar as propriedades do traço com @keyframes, então tome cuidado.
Relacionado
strokestroke-dashoffsetstroke-linecapstroke-width
Mais Informações
- SVG 1.1 Spec
- MDN em preenchimentos e traços
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| sim | sim | sim | sim | 9+ | 4,4+ | sim |