javascript - 如何获得 svg 线元素总长度

Question

我有一个非常简单的 svg，上面只有一行

<svg version="1.1" id="animation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 480" xml:space="preserve" preserveAspectRatio="xMinYMin meet" baseProfile="tiny">
    <line id="line-1" style="stroke:#777777;stroke-miterlimit:10;" x1="358" y1="332.5" x2="371.3" y2="364.7"/>
</svg>

我使用 jquery 获取该行并使用 getTotalLength() 找到它的长度

var len = $("#line-1").get(0).getTotalLength();

但是我的浏览器一直提示这个错误

Uncaught TypeError: $(...).get(...).getTotalLength is not a function

谁能告诉我行元素是否可以使用 getTotalLength()？如果没有，我怎样才能得到线的长度。

谢谢。

这是我的例子:https://jsfiddle.net/chitocheng/1h5eckjh/

Answer 1

A line不存储长度，因此您需要使用距离公式自行获取:

var line = $("#line-1").get(0);
var len = dist(line.x1.baseVal.value, line.x2.baseVal.value,
               line.y1.baseVal.value, line.y2.baseVal.value);

$("#len").text(len);

function dist(x1, x2, y1, y2){
    return Math.sqrt( (x2-=x1)*x2 + (y2-=y1)*y2 );
}

Fiddle Example

但是一个path确实支持 getTotalLength()功能。所以如果你想使用它，你需要使用 <path>而不是 <line> .设置您的 <line>作为 <path>你可以这样做:

<path id="line-1" style="stroke:#777777;stroke-miterlimit:10;" d="M 358,332.5 L 371.3,364.7"/>

Fiddle Path Example