ストロークダッシュオフセットは私のために働いていません

私はストロークダッシュオフセットが私にとってうまくいかないという奇妙な問題を発見しました。私は自分自身を描くためにチェックマークを作りたい。ストロークダッシュオフセットは私のために働いていません

あなたがそれをここに見ることができるので、私はペンを作成しました： 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>

を両方とも正の値に0を通じて、ネガティブからのパスのCSSや属性を変更するには、チェックマーク

の変更外観をdoesntの私は何が間違っているのか分からないので、アドバイスは高く評価されるでしょう。ありがとうございます。
https://codepen.io/anon/pen/mMgQMY

2017-09-05 Kalreg

stroke-dashoffsetのアニメーションがstroke-dasharrayと連携し、また、実際に@keyframesが欠落している

アニメーションを持っていますパスは212.3です。したがって、6630のダッシュ・アレイは不必要に大きくなります。代わりに213のようなものを使用してください。 https://codepen.io/anon/pen/qXGaOv

2017-09-05 23:12:41 Dekel

ことの長さ：あなたのcodepenへの更新が

ここ

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

です： –

ありがとうございます。それは問題を解決しました。 – Kalreg

答えて