<svg 
     width="600" height="600"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
	 
	
<path
     d="m 10,50 h 100,50 m 200,0 H 510"
     style="stroke:#000000;stroke-width:2"
     id="line1" />
	 
	 <script>
	 	var el = document.getElementById("line1");
		len = el.getTotalLength()
		alert('line1 length = ' + len);

	 </script>
	 
<line id="line2" x1="10" y1="100" x2="510" y2="100" stroke="black" stroke-width="2" /> 

	<script>
	 	var el = document.getElementById("line2");
		len = el.getTotalLength()
		alert('line2 length = ' + len);

	</script>

<line id="line3" x1="10" y1="150" x2="510" y2="250" stroke="black" stroke-width="2" /> 

	<script>
	 	var el = document.getElementById("line3");
		len = el.getTotalLength()
		alert('line3 length = ' + len);

	 </script>

  <path
     id="line4"
     d="m 10,250 147.80349,29.5607 M 354.08423,318.81685 510,350"
     style="stroke:#000000;stroke-width:2" />
	 
	 <script>
	 	var el = document.getElementById("line4");
		len = el.getTotalLength()
		alert('line4 length = ' + len);

	 </script>

</svg>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.