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 Этот код не работает на генератор кода StackOverflow-х. (Я не знаю, почему) Вот почему я сделал копию здесь https://jsfiddle.net/BlackStar1991/ea6255h1/

Answer 1

Грязная точка вызывается «0 длины "sub path с закругленной линией. Когда значение параметра stroke-dashoffset равно 0, путь делится на [0, 150]. Таким образом, он имеет подпункт «0 length».

Чтобы решить эту проблему, вы можете немного уменьшить начальную точку линии.

@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; 
    } 
}