[SVG] 체크박스에 SVG 로 애니메이션 효과 넣기

라벨안에 svg 를 넣어줍니다. 

   <label for="check">
        <svg width="30" height="15" xmlns="http://w3.org/2000/svg" version="1.1" viewbox="0 0 80 40">
            <polyline class="st1" points="9.06 20.89 25.85 35.74 50.46 9.35"/>
        </svg>
        <span>체크하려면 클릭하세요.</span>
    </label>

css를 이용해 check 되면 label 의 svg를 그리는 애니메이션을 추가합니다. 

input:checked ~ label .st1{
    stroke:#000000; 
    animation: dash 0.3s linear alternate 1;
}