如何获得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();

但我的浏览器一直给出此错误警告

未捕获的TypeError:$(...).get(...).getTotalLength不是函数

谁能告诉我line元素是否可以使用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 );
}

小提琴示例

但是path确实支持这个getTotalLength()功能.因此,如果你想使用它,你需要使用a <path>而不是a <line>.要设置你<line>的<path>,你可以这样做:

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

小提琴路径示例

Answer 2

对于任何想知道 2020 年：
JQUERY (3.4.1) >> $('#lineID').get(0).getTotalLength()
JS >>document.getElementById('lineID').getTotalLength()
是否有效的人来说，<lines/>
答案是肯定的。

测试的浏览器：
Firefox 76.0.1
Chromium：81.0.4044.138（官方版本）（64位）
Chrome 83.0.4103.61
Opera 68.0.3618.125

https://jsfiddle.net/mzyd4ura/2/