SVG 애니메이션/더러운 경로

Question

내 경로에서 포인트를 제거하는 방법을 설명 할 수있는 사람이 누구일까요?

window.onload =function(){ 
 
    
 
     var myHeart = $("#Heart"); 
 
     var current = 0; 
 
    
 
     var PathTail_MainPath = $("#PathTail_MainPath"); 
 
     var tailMainPath = $("#tailMainPath"); 
 
    
 
     myHeart.click(function() { 
 
    
 
      if (current++ % 2 == 0) { 
 
       
 
      PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn"); 
 
      tailMainPath.toggleClass("tailMainPath tailMainPathReturn"); 
 
    
 
      console.log("one"); 
 
     } else { 
 
    
 
      PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn"); 
 
      tailMainPath.toggleClass("tailMainPath tailMainPathReturn"); 
 
    
 
      console.log("two"); 
 
     } 
 
    }); 
 
};

#Heart { 
 
    width: 600px; 
 
    border: 1px solid #000; 
 
    cursor: pointer; 
 
} 
 
    
 
#Heart .tailMainPath { 
 
    -webkit-animation: tailStroke 500ms linear; 
 
      animation: tailStroke 500ms linear; 
 
    -webkit-animation-fill-mode: forwards; 
 
      animation-fill-mode: forwards; 
 
} 
 
    
 
#Heart .tailMainPathReturn { 
 
    -webkit-animation: tailStrokeReturn 500ms linear 125ms; 
 
      animation: tailStrokeReturn 500ms linear 125ms; 
 
    -webkit-animation-fill-mode: forwards; 
 
      animation-fill-mode: forwards; 
 
} 
 
    
 
@-webkit-keyframes tailStroke { 
 
    0% { 
 
    stroke-dasharray: 0 150; 
 
    stroke-dashoffset: 0; 
 
    } 
 
    100% { 
 
    stroke-dasharray: 150 0; 
 
    stroke-dashoffset: 150; 
 
    } 
 
} 
 
    
 
@keyframes tailStroke { 
 
    0% { 
 
    stroke-dasharray: 0 150; 
 
    stroke-dashoffset: 0; 
 
    } 
 
    100% { 
 
    stroke-dasharray: 150 0; 
 
    stroke-dashoffset: 150; 
 
    } 
 
} 
 
    
 
@-webkit-keyframes tailStrokeReturn { 
 
    0% { 
 
    stroke-dasharray: 150 0; 
 
    stroke-dashoffset: 150; 
 
    } 
 
    100% { 
 
    stroke-dasharray: 0 150; 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
    
 
@keyframes tailStrokeReturn { 
 
    0% { 
 
    stroke-dasharray: 150 0; 
 
    stroke-dashoffset: 150; 
 
    } 
 
    100% { 
 
    stroke-dasharray: 0 150; 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg version="1.1" id="Heart" class="moving" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    viewBox="0 0 450 320" style="enable-background:new 0 0 450 320;" xml:space="preserve"> 
 
    
 
    <defs> 
 
     <path id="PathTail_MainPath" class="tailMainPathReturn" d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9 
 
     c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/> 
 
    
 
     <path id="tailMainPath" class="tailMainPathReturn" d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9 
 
     c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/> 
 
      
 
    </defs> 
 
    <use xlink:href="#PathTail_MainPath" fill="none"; stroke="#000" stroke-width="11"/> 
 
    <use xlink:href="#tailMainPath" fill="none"; stroke="#A50808" stroke-linecap="round" stroke-width="9"/> 
 
</svg>

PS이 코드는 코드 생성기 유래의에서 작동하지 않습니다. 내가 여기 https://jsfiddle.net/BlackStar1991/ea6255h1/

Answer 1

사본을 만든 더러운 점은 "0 길이에 의해 발생하는 이유 (왜 몰라) "둥근 선 뚜껑이있는 하위 경로. 획 - 대시 오프셋의 값이 0 일 때 경로는 [0, 150]으로 나뉩니다. 그래서 "0 길이"하위 경로가 있습니다.

이 문제를 해결하려면 선 대시의 시작점을 약간 오프셋 할 수 있습니다.

@keyframes tailStroke { 
    0% { 
    stroke-dasharray: 0 151; 
    stroke-dashoffset: 1; 
    } 
    100% { 
    stroke-dasharray: 151 0; 
    stroke-dashoffset: 151; 
    } 
} 
@keyframes tailStrokeReturn { 
    0% { 
    stroke-dasharray: 151 0; 
    stroke-dashoffset: 151; 
    } 
    100% { 
    stroke-dasharray: 0 151; 
    stroke-dashoffset: 1; 
    } 
}