如何得到svg绘制图形或线条路径的准确长度？

[bruce-zhang932]

您好博主。看了您“【Web动画】SVG 线条动画入门”文章有几个疑问，stroke-dasharray和stroke-dashoffset设置的值都是自己随便写完，然后自己在浏览器上调的吗？我该如何知道图形或线条路径的准确长度呢？

[chokcoco]

@syyzz3
可以使用 javascript 计算 path 路径长度。
例如：

<svg>
    <path d="...">
</svg>
<script>
    var obj = document.querySelector("path");
    var length = obj.getTotalLength();
</script>

[bruce-zhang932]

@chokcoco
但如果是polyline,rect ,circle 就用不了

[chokcoco]

@syyzz3
复杂路径用 getTotalLength
rect ,circle 这类svg图形不是套一下数学公式就出来了吗。