스트로크 대시 세트가 저에게 맞지 않습니다

스트로크 대시 오프셋이 저에게 맞지 않는 이상한 문제를 발견했습니다. 나는 그 자체를 그릴 수있는 체크 마크를 만들고 싶다. 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 또는 음에서 경로의 속성을 변경하면 내가 체크

의 변화 모습을 나던 : 여기를 볼 수 있도록

나는 펜을 생성 내가 뭘 잘못하고 있는지, 그래서 어떤 조언을 더 감사하게 될 것이라고 확신하지 않습니다. 감사합니다.
https://codepen.io/anon/pen/mMgQMY

2017-09-05 Kalreg

stroke-dashoffset의 애니메이션 stroke-dasharray와 함께 작동하고 당신은 또한 실제에 @keyframes 누락

애니메이션이 경로는 212.3입니다. 따라서 6630의 dasharray가 불필요하게 큽니다. 대신 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

답변