Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Measure the length of an svg path?

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?

	
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);

</script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
		<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"
	 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>

<div style="height: 400px;"></div>
<div class="spacer s2"></div>
like image 858
R Reveley Avatar asked Feb 07 '17 14:02

R Reveley


People also ask

How do I find the SVG path length?

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.

What is the SVG path?

The <path> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more. Paths create complex shapes by combining multiple straight lines or curved lines. Complex shapes composed only of straight lines can be created as <polyline> s.

Is it possible to draw any path in SVG?

The element in SVG is the ultimate drawing element. It can draw anything! I've heard that under the hood all the other drawing elements ultimately use path anyway. The path element takes a single attribute to describe what it draws: the d attribute.

What is stroke Dasharray?

The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape; Note: As a presentation attribute, stroke-dasharray can be used as a CSS property.


1 Answers

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>
like image 140
Gerardo Furtado Avatar answered Sep 22 '22 13:09

Gerardo Furtado