Question

我有一个SVG路径，我需要在该路径中定位一个圆，但该路径中的位置必须依赖于我使用javascript接收的变量。

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

路径是闭路。这是一条赛道，我在赛道上取得了进步。

Answer 1

我搜索相同，但只找到＆＃34; animateMotion＆＃34;标签： https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion 我需要控制％的移动路径，就像你一样..

找到方法：

＆＃13;

<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>

＆＃13;

也许＆＃39;开始＆＃39;和＆＃39; dur＆＃39;说所有持续时间，这个＆＃39; keyPoints =＆＃34; 0.5; 1; 1; 0.3＆＃34;＆＃39;圆圈通过的所有点，我认为它的百分比，这种情况下它开始0.5 = 50％的所有方式。也许如果dur =＆＃34; 0s＆＃34;它不会与animateMotion一起移动，并且可以用js控制..

在SVG路径中设置对象的位置

1 个答案: