获取 SVG 线条、矩形、多边形和圆形标签的长度

Question

我设法找到了 svg 中路径的长度，但现在我想从 SVG 中找到直线、矩形、多边形和圆形标签的长度，我现在真的迷路了，还有线索吗？还是已经有一些类似路径的功能？

Answer 1

如果其他人想找到这些标签的长度，我为每个标签制作了一些功能，测试了它们，我说它们工作得很好，这就是我需要的。

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

我认为您对问题的看法不正确：

rectangle = 2 * (width + height)的长度

线的长度（对于任何非垂直线 c^2 = a^2 + b^2 使用勾股定理）或对于水平使用（x1 到 x2），对于垂直使用（y1 到 y2）

圆的长度 = 2 × π × 半径 ...等

Answer 3

在 SVG 2 中，所有几何元素都将具有 pathLength 属性，但截至 2017 年 5 月，这仍将在大多数浏览器中实现。

请参阅https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement 了解更多信息。

我们可以在未来证明@zetcoby 的答案：

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

Answer 4

我尝试将 ZetCoby 指定的答案用于多边形，但在测试中我发现它返回的路径长度是错误的。

例子：

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

上述多边形的长度应该是56，但getPolygonLength(el)函数返回的值是61.79898987322332。

我编写了一个算法来正确计算 SVG 多边形的路径长度，所以我认为我应该将其提供回来，因为这是在搜索此问题时谷歌上的第一次点击。

这是我的功能。享受...

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