stroke-dashoffset ne fonctionne pas pour moi

Question

Tout en travaillant avec animation svg j'ai découvert un problème étrange que stroke-dashoffset ne fonctionne pas pour moi. Je veux faire acheckmark pour se dessiner.

J'ai créé un stylo pour que vous puissiez le regarder ici: https://codepen.io/kalreg/pen/yorQaV

<svg> 
    <path stroke="red" fill="none" stroke-width=10 stroke-dashoffset=6530 d="M5,50 L60,105 L150,5"></path> 
</svg> 

Les deux changeant css ou attribut de chemin de négatif, par 0 à des valeurs positives doesnt changement apparence de coche

Je suis Je ne sais pas ce que je fais mal, donc tout conseil serait plus qu'apprécié. Merci.

Answer 1

L'animation de stroke-dashoffset travaille en collaboration avec stroke-dasharray et vous manquez aussi @keyframes réelles ont l'animation:

path { 
    stroke-dasharray: 6630; 
    stroke-dashoffset: 6630; 
    animation: dash 5s linear forwards; 
} 

@keyframes dash { 
    to { 
    stroke-dashoffset: 0; 
    } 
} 

Voici la mise à jour à votre codepen:
https://codepen.io/anon/pen/mMgQMY