CODEWITHSUNDEEP
svgpolyline
Khin Myo Thant Maw
Khin Myo Thant Maw

Reputation: 23

How can I get length of SVG polyline element?

This is my polyline and I want to get its length.

<div class="svg-1">
  <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612.417px" height="274.412px" viewBox="0 0 612.417 274.412" enable-background="new 0 0 612.417 274.412" xml:space="preserve"> 
    <g>
      <defs>
        <rect id="SVGID_1_" y="0" width="612.417" height="274.412" />
      </defs>
      <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_" overflow="visible" />
      </clipPath>
      <polyline class="square-1" clip-path="url(#SVGID_2_)" fill="none" stroke="#B2965F" stroke-width="4" stroke-miterlimit="10" points="
                        276.084,191.912 38.084,191.912 38.084,26.079 589.417,26.079 589.417,191.912 311.417,191.912 311.417,273.412     " />
    </g>
  </svg>
</div>

Upvotes: 2

Views: 3879

Answers (3)

xReeQz
xReeQz

Reputation: 320

Polyline element implements the SVGGeometryElement interface, which in turn has a method getTotalLength(). So you can basically do this (providing you polyline has an attribute id="polyline"):

var polyline = document.getElementById("polyline");
var totalLength = polyline.getTotalLength();

SVGGeometryElement.getTotalLength()

Upvotes: 4

Robert Longson
Robert Longson

Reputation: 124049

Use the SVG DOM to read each vertex position and then work out the distance between the vertices using pythagoras theorem. Then add up all the distances.

var totalLength = 0;
var prevPos;
var polyline = document.getElementById("polyline");
for (var i = 0 ; i < polyline.points.numberOfItems;i++) {
    var pos = polyline.points.getItem(i);
    if (i > 0) {
        totalLength += Math.sqrt(Math.pow((pos.x - prevPos.x), 2) + Math.pow((pos.y - prevPos.y), 2));
    }
    prevPos = pos;
}
alert(totalLength);
<div class="svg-1">
  <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612.417px" height="274.412px" viewBox="0 0 612.417 274.412" enable-background="new 0 0 612.417 274.412" xml:space="preserve"> 
    <g>
      <defs>
        <rect id="SVGID_1_" y="0" width="612.417" height="274.412" />
      </defs>
      <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_" overflow="visible" />
      </clipPath>
      <polyline id="polyline" class="square-1" clip-path="url(#SVGID_2_)" fill="none" stroke="#B2965F" stroke-width="4" stroke-miterlimit="10" points="
                        276.084,191.912 38.084,191.912 38.084,26.079 589.417,26.079 589.417,191.912 311.417,191.912 311.417,273.412     " />
    </g>
  </svg>
</div>

Upvotes: 7

cuixiping
cuixiping

Reputation: 25381

Here is the javascript code

function getPolylineLength(polylineElement){
    function dis(p,q){
        return Math.sqrt((p.x-q.x)*(p.x-q.x) + (p.y-q.y)*(p.y-q.y));
    }
    var ps = polylineElement.points, n = ps.numberOfItems, len=0;
    for(var i=1; i<n; i++){
        len += dis(ps.getItem(i-1),ps.getItem(i));
    }
    return len;
}

Upvotes: 2

Related Questions