A stroke-dashoffsetpropriedade em CSS define o local ao longo de um caminho SVG onde o traço de a strokecomeçará. Quanto maior o número, mais adiante os traços começarão ao longo do caminho.
.module ( stroke-dashoffset: 100; )Lembrar:
- Isto irá substituir um atributo de apresentação
- Isso não substituirá um estilo embutido, por exemplo
Valores
A stroke-dashoffsetpropriedade pode aceitar uma porcentagem ou um valor numérico.
stroke-dashoffset: 100stroke-dashoffset: 25%
Observe que as unidades (ou seja, eme px) não são necessárias. Um número sem unidades é renderizado em unidades de pixel. A porcentagem é relativa à porcentagem da janela de visualização atual.
Veja a propriedade Pen stroke-dashoffset por CSS-Tricks (@ css-tricks) em CodePen.
Ficar complicado com stroke-dashoffset
Você já viu aquelas demonstrações legais em que uma forma SVG parece se desenhar? Esse é um truque que anima o stroke-dashoffsetde um elemento em conjunto com a stroke-dasharraypropriedade.
.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.
Relacionado
strokestroke-dasharraystroke-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 |