Measure the length of an svg path?

Question

I am playing with Scrollmagic and want to use the effect here: http://scrollmagic.io/examples/advanced/svg_drawing.html

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;

How can I find the length of the path?

Answer 1

You can use getTotalLength():

The SVGGeometryElement.getTotalLength() method returns the user agent's computed value for the total length of the path in user units.

Here is a demo with your 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"
	 viewBox="0 0 841.9 595.3" xml:space="preserve" width="1000px">
<style type="text/css">
	.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
	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"/>
</svg>