SVG 的 getTotalLength(), getPointAtLength() 方法简介-CSDN博客

本文链接：https://blog.csdn.net/u013970232/article/details/114267994

本文介绍了SVG中的getTotalLength()和getPointAtLength()两个方法，getTotalLength()用于获取SVG路径的总长度，而getPointAtLength(len)则返回路径上特定距离处的点的坐标。文章还提到了参数len的有效范围，并通过一个基于d3.js的Demo进行了展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

getTotalLength

SVG路径对象.getTotalLength()
该方法返回用户代理对路径总长度(以用户单位为单位)的计算值

var a = SVGPathElement.getTotalLength()

getPointAtLength

SVG路径对象.getPointAtLength(len)
该方法返回路径上指定距离的点的坐标
len
0~SVGPathElement.getTotalLength() 的浮点数, 超出范围会换算成最大值或最小值

var p = SVGPathElement.getPointAtLength(len)
// p.x, p.y 指定距离的点的坐标

Demo

demo 基于 d3.js

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>SVG 的 getTotalLength(), getPointAtLength() 方法简介</title>
	</head>

	<body>
		<svg width="200" height="200">
			<!--<path id="circle" d="M100 0  A 100 100 0 1 1 0 100" stroke="#f00" fill="green" stroke-width="1" />-->
		</svg>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const container = d3.select('svg')

			container.append('circle')
				.attr('cx', '100')
				.attr('cy', '100')
				.attr('r', '100')
				.attr('fill', 'none')
				.attr('stroke', '#f00')
				.attr('id', 'circle')

			var Circle = container.select('#circle')
			var CircleLen = Circle.node().getTotalLength()

			for(var i = 0; i < 12; i++) {
				var p = Circle.node().getPointAtLength(i * CircleLen / 12)
				container.append("line")
					.attr("x1", "100")
					.attr("y1", "100")
					.attr("x2", p.x)
					.attr("y2", p.y)
					.attr("style", "stroke:rgb(0,0,0);stroke-width:1")
			}
		</script>
	</body>

</html>

//end