<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>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.