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

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

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位）
铬83.0.4103.61
Opera 68.0.3618.125

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

如何获得svg行元素的总长度

2 个答案: