Измерьте длину пути SVG?

Question

Я играю с Scrollmagic и хочу использовать эффект здесь: http://scrollmagic.io/examples/advanced/svg_drawing.html

Я создал закорючку SVG, чтобы проверить это и нужно вставить длину пути, чтобы штрих-dasharray: 2000px; stroke-dashoffset: 2000px;

Как я могу найти длину пути?

\t 
 
function pathPrepare ($el) { 
 
\t \t var lineLength = $el[0].getTotalLength(); 
 
\t \t $el.css("stroke-dasharray", lineLength); 
 
\t \t $el.css("stroke-dashoffset", lineLength); 
 
\t } 
 

 
\t var $word = $("path#word"); 
 
\t var $dot = $("path#dot"); 
 

 
\t // prepare SVG 
 
\t pathPrepare($word); 
 

 
\t // init controller 
 
\t var controller = new ScrollMagic.Controller(); 
 

 
\t // build tween 
 
\t var tween = new TimelineMax() 
 
\t \t .add(TweenMax.to($word, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw word for 0.9 
 
\t \t .add(TweenMax.to("path", 1, {stroke: "#33629c", ease:Linear.easeNone}), 0); \t \t \t // change color during the whole thing 
 

 
\t // build scene 
 
\t var scene = new ScrollMagic.Scene({triggerElement: "#trigger1", duration: 200, tweenChanges: true}) 
 
\t \t \t \t \t .setTween(tween) 
 
\t \t \t \t \t .addIndicators() // add indicators (requires plugin) 
 
\t \t \t \t \t .addTo(controller); 
 

 
</script>

\t \t <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
\t \t <script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script> 
 
\t \t <script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> 
 
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> 
 
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js"></script> 
 

 
<div style="height: 400px;"></div> 
 
<div class="spacer s2"></div> 
 

 

 
<div id="trigger1" class="spacer s0"></div> 
 

 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 841.9 595.3" xml:space="preserve" width="1000px"> 
 
<style type="text/css"> 
 
\t .st0{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;} 
 
</style> 
 
<path id="word" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2000px; stroke-dashoffset: 2000px;" fill="none" class="st0" d="M29.7,6.4c-42,87.9,34.6,16.4,96.4,12.1s346,145.7,192.8,110.4S40.8,9.8,66.8,128s179.2,218.1,281.7,122.4 
 
\t s10.2-115.2,215-94c465.8,48.3,233.5,90.1,90.2,85.4c-247-8.1,299.2,110.9-259.5,138C46.5,396.6-33.3,439.2,145.8,491 
 
\t s171.8-83.6,431.3-18.1s96.4,107.8-79.1,122.4"/> 
 
</svg> 
 

 
<div style="height: 400px;"></div> 
 
<div class="spacer s2"></div>

Answer 1

Вы можете использовать getTotalLength():

Метод SVGGeometryElement.getTotalLength() возвращает вычисленное значение агента пользователя для общей длины пути в пользовательских единицах.

Вот демо с SVG:

var myPath = document.getElementById("word"); 
 
var length = myPath.getTotalLength(); 
 
console.log(length);

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 841.9 595.3" xml:space="preserve" width="1000px"> 
 
<style type="text/css"> 
 
\t .st0{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;} 
 
</style> 
 
<path id="word" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2000px; stroke-dashoffset: 2000px;" fill="none" class="st0" d="M29.7,6.4c-42,87.9,34.6,16.4,96.4,12.1s346,145.7,192.8,110.4S40.8,9.8,66.8,128s179.2,218.1,281.7,122.4 
 
\t s10.2-115.2,215-94c465.8,48.3,233.5,90.1,90.2,85.4c-247-8.1,299.2,110.9-259.5,138C46.5,396.6-33.3,439.2,145.8,491 
 
\t s171.8-83.6,431.3-18.1s96.4,107.8-79.1,122.4"/> 
 
</svg>