Get the length of SVG lines, rectangles, polygons, and circles

Question

I managed to find the length of the paths in svg, but now I want to find the length for lines, rectangles, polygons and environment tags from SVG, am I really lost right now and tips? or are there already some functions, for example, for a path?

Answer 1

In case someone else wants to find the length of these tags, I made some functions for each of them, tested them, and I say that they work pretty well, this is what I need.

var tools = { /** * * Used to get the length of a rect * * @param el is the rect element ex $('.rect') * @return the length of the rect in px */ getRectLength:function(el){ var w = el.attr('width'); var h = el.attr('height'); return (w*2)+(h*2); }, /** * * Used to get the length of a Polygon * * @param el is the Polygon element ex $('.polygon') * @return the length of the Polygon in px */ getPolygonLength:function(el){ var points = el.attr('points'); points = points.split(" "); var x1 = null, x2, y1 = null, y2 , lineLength = 0, x3, y3; for(var i = 0; i < points.length; i++){ var coords = points[i].split(","); if(x1 == null && y1 == null){ if(/(\r\n|\n|\r)/gm.test(coords[0])){ coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[0].replace(/\s+/g,""); } if(/(\r\n|\n|\r)/gm.test(coords[1])){ coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[1].replace(/\s+/g,""); } x1 = coords[0]; y1 = coords[1]; x3 = coords[0]; y3 = coords[1]; }else{ if(coords[0] != "" && coords[1] != ""){ if(/(\r\n|\n|\r)/gm.test(coords[0])){ coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[0].replace(/\s+/g,""); } if(/(\r\n|\n|\r)/gm.test(coords[1])){ coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,""); coords[0] = coords[1].replace(/\s+/g,""); } x2 = coords[0]; y2 = coords[1]; lineLength += Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2)); x1 = x2; y1 = y2; if(i == points.length-2){ lineLength += Math.sqrt(Math.pow((x3-x1), 2)+Math.pow((y3-y1),2)); } } } } return lineLength; }, /** * * Used to get the length of a line * * @param el is the line element ex $('.line') * @return the length of the line in px */ getLineLength:function(el){ var x1 = el.attr('x1'); var x2 = el.attr('x2'); var y1 = el.attr('y1'); var y2 = el.attr('y2'); var lineLength = Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2)); return lineLength; }, /** * * Used to get the length of a circle * * @param el is the circle element * @return the length of the circle in px */ getCircleLength:function(el){ var r = el.attr('r'); var circleLength = 2 * Math.PI * r; return circleLength; }, /** * * Used to get the length of the path * * @param el is the path element * @return the length of the path in px */ getPathLength:function(el){ var pathCoords = el.get(0); var pathLength = pathCoords.getTotalLength(); return pathLength; } } 

Answer 2

I think you are not looking at the problem correctly:

rectangle = 2 * (width + height) length rectangle = 2 * (width + height)

line length (use the pythagorean theorem for any non-vertical line c ^ 2 = a ^ 2 + b ^ 2) or use (x1 - x2) for the horizontal, (y1 - y2) for the vertical

circle length = 2 × π × radius ... etc.

Answer 3

In SVG 2, all geometry elements will have the pathLength property, but from May 2017 this should still be implemented in most browsers.

See https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement for more details.

We can in the future proof @zetcoby answer:

 if( el.pathLength ) { return el.pathLength; } else { // rest of code... } 

Answer 4

I tried to use the answer provided by ZetCoby for polygons, but when testing, I found that the length of the path that it returns is incorrect.

Example:

 <polygon points="10.524,10.524 10.524,24.525 24.525,24.525 24.525,10.524" style="fill:none;stroke-width:0.2;stroke:black"></polygon> 

The above polygon should have a length of 56 , but the getPolygonLength(el) function returns 61.79898987322332 .

I wrote an algorithm to correctly calculate the path length of an SVG polygon, so I thought I should contribute, as this is the first hit on google when looking for this problem.

Here is my function. Enjoy ...

 function polygon_length(el) { var points = el.attr('points'); points = points.split(' '); if (points.length > 1) { function coord(c_str) { var c = c_str.split(','); if (c.length != 2) { return; // return undefined } if (isNaN(c[0]) || isNaN(c[1])) { return; } return [parseFloat(c[0]), parseFloat(c[1])]; } function dist(c1, c2) { if (c1 != undefined && c2 != undefined) { return Math.sqrt(Math.pow((c2[0]-c1[0]), 2) + Math.pow((c2[1]-c1[1]), 2)); } else { return 0; } } var len = 0; // measure polygon if (points.length > 2) { for (var i=0; i<points.length-1; i++) { len += dist(coord(points[i]), coord(points[i+1])); } } // measure line or measure polygon close line len += dist(coord(points[0]), coord(points[points.length-1])); return len; } else { return 0; } }