javascript - 设置 SVG 路径中对象的位置

Question

我有一个 SVG 路径，我需要在该路径中放置一个圆圈，但该路径内的位置必须取决于我使用 javascript 收到的变量。

我已经使用 var length = myPath.getTotalLength(); 获得了路径的长度，但我不知道如何设置对象在该路径内的位置(或使用路径长度)，具体取决于我得到的变量。

该路径是闭合回路。这是一条赛道，随着赛道的进展，我得到了汽车的位置。

Answer 1

我搜索相同，但只找到“animateMotion”标签: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion我需要控制路径上移动的百分比，就像你一样..

找到方法:

<svg id="svg_1" width="190" height="160" xmlns="http://www.w3.org/2000/svg">
			<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" stroke-width="1" fill="transparent" id="path_1" />
			<circle cx="" cy="" r="10" fill="blue">
				<animateMotion dur="5s" begin="0s" keyPoints="0.5;1;1;0.25" fill="freeze" keyTimes="0;0.7;0.7;1" calcMode="linear">
					<mpath xlink:href="#path_1" />
				</animateMotion>
			</circle>
</svg>

也许 'begin' 和 'dur' 表示所有持续时间，而这个 'keyPoints="0.5;1;1;0.3"' 是圆圈经过的所有点，我认为它的百分比，这种情况下它开始 0.5 = 50所有方式的%。也许如果 dur="0s"它不会用 animateMotion 移动，并且可以用 js 控制..