Snap svg計算路徑的錯誤長度

Question

這裏是sample。我試圖製作路徑dasharray \ dashoffset動畫技巧。但是Snap Svg計算錯誤的路徑長度。由Illustrator上的複合路徑製作的Svg。我做錯了什麼，或者它是一個錯誤，我應該報告錯誤？有什麼方法可以正確計算路徑長度嗎？

/*First svg*/ 
 
var path = Snap('#svg path'); 
 
var pathLength = Snap.path.getTotalLength(path); //calc length 
 

 
path.attr({ 
 
    "stroke-dashoffset": 0, 
 
    "stroke-dasharray": pathLength 
 
}); 
 

 
$("#total").text(pathLength); 
 

 
/*path.animate({"stroke-dashoffset": pathLength}, 3500, mina.ease);*/ 
 
Snap.animate(0, pathLength, function(value) { 
 
    path.attr({ 
 
    'stroke-dashoffset': value 
 
    }); 
 
    $("#len").text(value); 
 
}, 5000, mina.easeinout); 
 

 
/*Second svg*/ 
 
var path2 = Snap('#svg2 path'); 
 
var selectedLength = 112; //select length by playing with styles in browser 
 
path2.attr({ 
 
    "stroke-dashoffset": 0, 
 
    "stroke-dasharray": selectedLength 
 
}); 
 

 
$("#total2").text(selectedLength); 
 

 
Snap.animate(0, selectedLength, function(value) { 
 
    path2.attr({ 
 
    'stroke-dashoffset': value 
 
    }); 
 
    $("#len2").text(value); 
 
}, 5000, mina.easeinout);

.wrap { 
 
    width: 100px; 
 
    float: left; 
 
    margin: 0 20px 0 0; 
 
} 
 

 
#svg, 
 
#svg2 { 
 
    fill-opacity: 0; 
 
    stroke: #000; 
 
    stroke-width: 2px; 
 
    stroke-linecap: round; 
 
    stroke-linejoin: round; 
 
} 
 

 
.body:after { 
 
    content: ''; 
 
    clear: both; 
 
    display: block; 
 
} 
 

 
.panel { 
 
    font-family: Arial; 
 
    line-height: 1.3em; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="body"> 
 
    <div class="wrap"> 
 
    <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60"> 
 
      <path class="st0" d="M59.1,32V13.6l0,0c0-0.1,0-0.2-0.1-0.3v-0.1c-0.1-0.1-0.1-0.2-0.2-0.3L47.2,1.3c-0.1-0.1-0.2-0.1-0.3-0.2h-0.1 
 
     c-0.1,0-0.2-0.1-0.3-0.1l0,0H1.8c-0.6,0-1,0.4-1,1v8.7 M45.5,1.1v12.6c0,0.6,0.4,1,1,1h12.4 M58.2,42.2h-2.6 
 
     c-0.1-0.1-0.1-0.3-0.2-0.4l1.9-1.7c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7l-3.9-3.9c-0.4-0.4-0.9-0.4-1.3,0l-1.8,1.8 
 
     c-0.2-0.1-0.3-0.1-0.4-0.2v-2.7c0-0.6-0.4-0.9-0.9-0.9h-5.6c-0.6,0-0.9,0.4-0.9,0.9v2.5c-0.1,0.1-0.3,0.1-0.4,0.2l-1.8-1.8 
 
     c-0.4-0.4-0.9-0.4-1.3,0l-3.9,3.9c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7l1.8,1.8c-0.1,0.2-0.1,0.3-0.2,0.4H34 
 
     c-0.6,0-0.9,0.4-0.9,0.9v5.6c0,0.6,0.4,0.9,0.9,0.9h2.6c0.1,0.1,0.1,0.3,0.2,0.4L35,51.7c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7 
 
     l3.9,3.9c0.4,0.4,0.9,0.4,1.3,0l1.8-1.8c0.2,0.1,0.3,0.1,0.4,0.2v2.7c0,0.6,0.4,0.9,0.9,0.9h5.6c0.6,0,0.9-0.4,0.9-0.9v-2.6 
 
     c0.1-0.1,0.3-0.1,0.4-0.2l1.8,1.8c0.4,0.4,0.9,0.4,1.3,0l3.9-3.9c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7L55.4,50 
 
     c0.1-0.1,0.1-0.3,0.2-0.4h2.6c0.6,0,0.9-0.4,0.9-0.9v-5.6C59.1,42.6,58.8,42.2,58.2,42.2z M46,42c-2.2,0-4,1.8-4,4s1.8,4,4,4 
 
     s4-1.8,4-4S48.2,42,46,42z M16.2,59V26.6c0-0.2,0-0.4,0.1-0.5l3.2-5.8c0.1-0.4,0.5-0.5,0.8-0.5s0.7,0.1,0.8,0.5l3.2,5.8 
 
     c0.1,0.2,0.1,0.4,0.1,0.5V59 M11,59V15c0-0.6-0.3-1-0.8-1H1.7c-0.5,0-0.8,0.4-0.8,1v44 M5,5h12 M20.4,5h4 M5,9h20 M55,19H35 M45,23 
 
     H29 M55,28H29 M35,32h-6 M55,23h-6 M0.9,23H5 M0.9,32.7H5 M0.9,42H5 M0.9,51.8H5 M16.2,26.6h4.1h4.1 M20.3,59V26.6" /> 
 
     </svg> 
 
    </div> 
 
    <div class="panel"> 
 
    <div>Length calc by Snap.path.getTotalLength</div> 
 
    <div id="total"></div> 
 
    <div>Stroke dashoffset during animation</div> 
 
    <div id="len"></div> 
 
    </div> 
 
</div> 
 
<div class="body"> 
 
    <div class="wrap"> 
 
    <svg id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60"> 
 
      <path class="st0" d="M59.1,32V13.6l0,0c0-0.1,0-0.2-0.1-0.3v-0.1c-0.1-0.1-0.1-0.2-0.2-0.3L47.2,1.3c-0.1-0.1-0.2-0.1-0.3-0.2h-0.1 
 
     c-0.1,0-0.2-0.1-0.3-0.1l0,0H1.8c-0.6,0-1,0.4-1,1v8.7 M45.5,1.1v12.6c0,0.6,0.4,1,1,1h12.4 M58.2,42.2h-2.6 
 
     c-0.1-0.1-0.1-0.3-0.2-0.4l1.9-1.7c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7l-3.9-3.9c-0.4-0.4-0.9-0.4-1.3,0l-1.8,1.8 
 
     c-0.2-0.1-0.3-0.1-0.4-0.2v-2.7c0-0.6-0.4-0.9-0.9-0.9h-5.6c-0.6,0-0.9,0.4-0.9,0.9v2.5c-0.1,0.1-0.3,0.1-0.4,0.2l-1.8-1.8 
 
     c-0.4-0.4-0.9-0.4-1.3,0l-3.9,3.9c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7l1.8,1.8c-0.1,0.2-0.1,0.3-0.2,0.4H34 
 
     c-0.6,0-0.9,0.4-0.9,0.9v5.6c0,0.6,0.4,0.9,0.9,0.9h2.6c0.1,0.1,0.1,0.3,0.2,0.4L35,51.7c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7 
 
     l3.9,3.9c0.4,0.4,0.9,0.4,1.3,0l1.8-1.8c0.2,0.1,0.3,0.1,0.4,0.2v2.7c0,0.6,0.4,0.9,0.9,0.9h5.6c0.6,0,0.9-0.4,0.9-0.9v-2.6 
 
     c0.1-0.1,0.3-0.1,0.4-0.2l1.8,1.8c0.4,0.4,0.9,0.4,1.3,0l3.9-3.9c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7L55.4,50 
 
     c0.1-0.1,0.1-0.3,0.2-0.4h2.6c0.6,0,0.9-0.4,0.9-0.9v-5.6C59.1,42.6,58.8,42.2,58.2,42.2z M46,42c-2.2,0-4,1.8-4,4s1.8,4,4,4 
 
     s4-1.8,4-4S48.2,42,46,42z M16.2,59V26.6c0-0.2,0-0.4,0.1-0.5l3.2-5.8c0.1-0.4,0.5-0.5,0.8-0.5s0.7,0.1,0.8,0.5l3.2,5.8 
 
     c0.1,0.2,0.1,0.4,0.1,0.5V59 M11,59V15c0-0.6-0.3-1-0.8-1H1.7c-0.5,0-0.8,0.4-0.8,1v44 M5,5h12 M20.4,5h4 M5,9h20 M55,19H35 M45,23 
 
     H29 M55,28H29 M35,32h-6 M55,23h-6 M0.9,23H5 M0.9,32.7H5 M0.9,42H5 M0.9,51.8H5 M16.2,26.6h4.1h4.1 M20.3,59V26.6" /> 
 
     </svg> 
 
    </div> 
 
    <div class="panel"> 
 
    <div>Length selected by me testing in browser</div> 
 
    <div id="total2"></div> 
 
    <div>Stroke dashoffset during animation</div> 
 
    <div id="len2"></div> 
 
    </div> 
 
</div>

Answer 1

泰到Alexandr_T。他解釋了爲什麼它發生錯誤。我將svg表單複合路徑重寫爲小路徑。每條路徑的開始是d =「M ...」（moveto）。只是在記事本中編輯它。這是救恩。

/*First svg*/ 
 
var path = Snap('#svg path'); 
 
var pathLength = Snap.path.getTotalLength(path); //calc length 
 

 
path.attr({ 
 
    "stroke-dashoffset": 0, 
 
    "stroke-dasharray": pathLength 
 
}); 
 

 
$("#total").text(pathLength); 
 

 
/*path.animate({"stroke-dashoffset": pathLength}, 3500, mina.ease);*/ 
 
Snap.animate(0, pathLength, function(value) { 
 
    path.attr({ 
 
     'stroke-dashoffset': value 
 
    }); 
 
    $("#len").text(value); 
 
}, 5000, mina.easeinout); 
 

 
/*Second svg*/ 
 
var svg2 = Snap('#svg2'); 
 
var paths = svg2.selectAll("path"); 
 
var maxLength = 0; 
 
var tempLength = 0; 
 

 
for (key in paths.items) { 
 
    tempLength = Snap.path.getTotalLength(paths.items[key]); 
 
    if (maxLength < tempLength) { 
 
     maxLength = tempLength; 
 
    } 
 
} 
 

 
svg2.attr({ 
 
    "stroke-dashoffset": 0, 
 
    "stroke-dasharray": maxLength 
 
}); 
 

 
$("#total2").text(maxLength); 
 

 
Snap.animate(0, maxLength, function(value) { 
 
    svg2.attr({ 
 
     'stroke-dashoffset': value 
 
    }); 
 
    $("#len2").text(value); 
 
}, 5000, mina.easeinout);

.wrap { 
 
    width: 100px; 
 
    float: left; 
 
    margin: 0 20px 0 0; 
 
} 
 

 
#svg, 
 
#svg2 { 
 
    fill-opacity: 0; 
 
    stroke: #000; 
 
    stroke-width: 2px; 
 
    stroke-linecap: round; 
 
    stroke-linejoin: round; 
 
} 
 

 
.body:after { 
 
    content: ''; 
 
    clear: both; 
 
    display: block; 
 
} 
 

 
.panel { 
 
    font-family: Arial; 
 
    line-height: 1.3em; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="body"> 
 
    <div class="wrap"> 
 
     <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60"> 
 
      <path class="st0" d="M59.1,32V13.6l0,0c0-0.1,0-0.2-0.1-0.3v-0.1c-0.1-0.1-0.1-0.2-0.2-0.3L47.2,1.3c-0.1-0.1-0.2-0.1-0.3-0.2h-0.1 
 
     c-0.1,0-0.2-0.1-0.3-0.1l0,0H1.8c-0.6,0-1,0.4-1,1v8.7 M45.5,1.1v12.6c0,0.6,0.4,1,1,1h12.4 M58.2,42.2h-2.6 
 
     c-0.1-0.1-0.1-0.3-0.2-0.4l1.9-1.7c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7l-3.9-3.9c-0.4-0.4-0.9-0.4-1.3,0l-1.8,1.8 
 
     c-0.2-0.1-0.3-0.1-0.4-0.2v-2.7c0-0.6-0.4-0.9-0.9-0.9h-5.6c-0.6,0-0.9,0.4-0.9,0.9v2.5c-0.1,0.1-0.3,0.1-0.4,0.2l-1.8-1.8 
 
     c-0.4-0.4-0.9-0.4-1.3,0l-3.9,3.9c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7l1.8,1.8c-0.1,0.2-0.1,0.3-0.2,0.4H34 
 
     c-0.6,0-0.9,0.4-0.9,0.9v5.6c0,0.6,0.4,0.9,0.9,0.9h2.6c0.1,0.1,0.1,0.3,0.2,0.4L35,51.7c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7 
 
     l3.9,3.9c0.4,0.4,0.9,0.4,1.3,0l1.8-1.8c0.2,0.1,0.3,0.1,0.4,0.2v2.7c0,0.6,0.4,0.9,0.9,0.9h5.6c0.6,0,0.9-0.4,0.9-0.9v-2.6 
 
     c0.1-0.1,0.3-0.1,0.4-0.2l1.8,1.8c0.4,0.4,0.9,0.4,1.3,0l3.9-3.9c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7L55.4,50 
 
     c0.1-0.1,0.1-0.3,0.2-0.4h2.6c0.6,0,0.9-0.4,0.9-0.9v-5.6C59.1,42.6,58.8,42.2,58.2,42.2z M46,42c-2.2,0-4,1.8-4,4s1.8,4,4,4 
 
     s4-1.8,4-4S48.2,42,46,42z M16.2,59V26.6c0-0.2,0-0.4,0.1-0.5l3.2-5.8c0.1-0.4,0.5-0.5,0.8-0.5s0.7,0.1,0.8,0.5l3.2,5.8 
 
     c0.1,0.2,0.1,0.4,0.1,0.5V59 M11,59V15c0-0.6-0.3-1-0.8-1H1.7c-0.5,0-0.8,0.4-0.8,1v44 M5,5h12 M20.4,5h4 M5,9h20 M55,19H35 M45,23 
 
     H29 M55,28H29 M35,32h-6 M55,23h-6 M0.9,23H5 M0.9,32.7H5 M0.9,42H5 M0.9,51.8H5 M16.2,26.6h4.1h4.1 M20.3,59V26.6" /> 
 
     </svg> 
 
    </div> 
 
    <div class="panel"> 
 
     <div>Length calc by getTotalLength() from combined path</div> 
 
     <div id="total"></div> 
 
     <div>Stroke dashoffset during animation</div> 
 
     <div id="len"></div> 
 
    </div> 
 
</div> 
 
<div class="body"> 
 
    <div class="wrap"> 
 
     <svg id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" > 
 
      <path d="M59.1,32V13.6l0,0c0-0.1,0-0.2-0.1-0.3v-0.1c-0.1-0.1-0.1-0.2-0.2-0.3L47.2,1.3c-0.1-0.1-0.2-0.1-0.3-0.2h-0.1 
 
      c-0.1,0-0.2-0.1-0.3-0.1l0,0H1.8c-0.6,0-1,0.4-1,1v8.7"/> 
 
      <path d="M45.5,1.1v12.6c0,0.6,0.4,1,1,1h12.4"/> 
 
      <path d="M58.2,42.2h-2.6 
 
      c-0.1-0.1-0.1-0.3-0.2-0.4l1.9-1.7c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7l-3.9-3.9c-0.4-0.4-0.9-0.4-1.3,0l-1.8,1.8 
 
      c-0.2-0.1-0.3-0.1-0.4-0.2v-2.7c0-0.6-0.4-0.9-0.9-0.9h-5.6c-0.6,0-0.9,0.4-0.9,0.9v2.5c-0.1,0.1-0.3,0.1-0.4,0.2l-1.8-1.8 
 
      c-0.4-0.4-0.9-0.4-1.3,0l-3.9,3.9c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7l1.8,1.8c-0.1,0.2-0.1,0.3-0.2,0.4H34 
 
      c-0.6,0-0.9,0.4-0.9,0.9v5.6c0,0.6,0.4,0.9,0.9,0.9h2.6c0.1,0.1,0.1,0.3,0.2,0.4L35,51.7c-0.2,0.2-0.3,0.4-0.3,0.7s0.1,0.5,0.3,0.7 
 
      l3.9,3.9c0.4,0.4,0.9,0.4,1.3,0l1.8-1.8c0.2,0.1,0.3,0.1,0.4,0.2v2.7c0,0.6,0.4,0.9,0.9,0.9h5.6c0.6,0,0.9-0.4,0.9-0.9v-2.6 
 
      c0.1-0.1,0.3-0.1,0.4-0.2l1.8,1.8c0.4,0.4,0.9,0.4,1.3,0l3.9-3.9c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7L55.4,50 
 
      c0.1-0.1,0.1-0.3,0.2-0.4h2.6c0.6,0,0.9-0.4,0.9-0.9v-5.6C59.1,42.6,58.8,42.2,58.2,42.2z"/> 
 
      <path d="M46,42c-2.2,0-4,1.8-4,4s1.8,4,4,4 
 
      s4-1.8,4-4S48.2,42,46,42z"/> 
 
      <path d="M16.2,59V26.6c0-0.2,0-0.4,0.1-0.5l3.2-5.8c0.1-0.4,0.5-0.5,0.8-0.5s0.7,0.1,0.8,0.5l3.2,5.8 
 
      c0.1,0.2,0.1,0.4,0.1,0.5V59"/> 
 
      <path d="M11,59V15c0-0.6-0.3-1-0.8-1H1.7c-0.5,0-0.8,0.4-0.8,1v44"/> 
 
      <path d="M5,5h12"/> 
 
      <path d="M20.4,5h4"/> 
 
      <path d="M5,9h20"/> 
 
      <path d="M55,19H35"/> 
 
      <path d="M45,23 
 
      H29"/> 
 
      <path d="M55,28H29"/> 
 
      <path d="M35,32h-6"/> 
 
      <path d="M55,23h-6"/> 
 
      <path d="M0.9,23H5"/> 
 
      <path d="M0.9,32.7H5"/> 
 
      <path d="M0.9,42H5"/> 
 
      <path d="M0.9,51.8H5"/> 
 
      <path d="M16.2,26.6h4.1h4.1"/> 
 
      <path d="M20.3,59V26.6"/> 
 
     </svg> 
 
    </div> 
 
    <div class="panel"> 
 
     <div>I rewrite combined path to small paths. Begining of each path is d="M..." (moveto)</div> 
 
     <div>Max length of svg paths getted by getTotalLength();</div> 
 
     <div id="total2"></div> 
 
     <div>Stroke dashoffset during animation</div> 
 
     <div id="len2"></div> 
 
    </div> 
 
</div>