Question

这是我的折线，我希望得到它的长度。

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

Answer 1

使用SVG DOM读取每个顶点位置，然后使用毕达哥拉斯定理计算出顶点之间的距离。然后将所有距离加起来。

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

{{1}}

Answer 2

这是javascript代码

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

Answer 3

Polyline元素实现SVGGeometryElement接口，后者又有一个方法getTotalLength()。所以你基本上可以这样做（假设折线有一个属性id="polyline"）：

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

SVGGeometryElement.getTotalLength()

如何获得SVG折线元素的长度？

3 个答案: