title: Measure the length of an svg path?
body: <p>I am playing with Scrollmagic and want to use the effect here: <a href="http://scrollmagic.io/examples/advanced/svg_drawing.html" rel="noreferrer">http://scrollmagic.io/examples/advanced/svg_drawing.html</a></p>
  
  <p>I created a squiggle svg to test it out and need to insert the length of the path in to stroke-dasharray: 2000px; stroke-dashoffset: 2000px; </p>
  
  <p>How can I find the length of the path?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> 
  function pathPrepare ($el) {
    var lineLength = $el[0].getTotalLength();
    $el.css("stroke-dasharray", lineLength);
    $el.css("stroke-dashoffset", lineLength);
   }
  
   var $word = $("path#word");
   var $dot = $("path#dot");
  
   // prepare SVG
   pathPrepare($word);
  
   // init controller
   var controller = new ScrollMagic.Controller();
  
   // build tween
   var tween = new TimelineMax()
    .add(TweenMax.to($word, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw word for 0.9
    .add(TweenMax.to("path", 1, {stroke: "#33629c", ease:Linear.easeNone}), 0);   // change color during the whole thing
  
   // build scene
   var scene = new ScrollMagic.Scene({triggerElement: "#trigger1", duration: 200, tweenChanges: true})
       .setTween(tween)
       .addIndicators() // add indicators (requires plugin)
       .addTo(controller);
  
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js"&gt;&lt;/script&gt;
  
  &lt;div style="height: 400px;"&gt;&lt;/div&gt;
  &lt;div class="spacer s2"&gt;&lt;/div&gt;
  
  
  &lt;div id="trigger1" class="spacer s0"&gt;&lt;/div&gt;
  
  &lt;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"
    viewBox="0 0 841.9 595.3" xml:space="preserve" width="1000px"&gt;
  &lt;style type="text/css"&gt;
   .st0{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;}
  &lt;/style&gt;
  &lt;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
   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
   s171.8-83.6,431.3-18.1s96.4,107.8-79.1,122.4"/&gt;
  &lt;/svg&gt;
  
  &lt;div style="height: 400px;"&gt;&lt;/div&gt;
  &lt;div class="spacer s2"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>