使用javascript在导轨上移动SVG对象

Question

我想把SVG对象移动到以下位置 <path> 我创建的指南，我的代码是基于这个 一个但我不明白为什么我的不工作，而我分享的codepen却可以。

function positionTheElement() {
	var html = document.documentElement;
	var body = document.body;
	var scrollPercentage = (html.scrollTop + body.scrollTop) / (html.scrollHeight - html.clientHeight);
	var path = document.getElementById("trace");
	var pathLen = path.getTotalLength();
	var pt = path.getPointAtLength(scrollPercentage * pathLen );
	var element = document.getElementById("etoile");
	element.setAttribute("transform", "translate("+ pt.x  + "," + pt.y + ")");
};
window.addEventListener("scroll", positionTheElement);
positionTheElement();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1920 4000" style="enable-background:new 0 0 1920 4000;" xml:space="preserve">
<g>
	<path class="st12" id="trace" d="M1491.8,3999l-7.8-365c0,0-1156-14-1240.5-1.3S155,3552,155,3552s3-594-0.3-688.1
		c-3.3-94.1,94.3-81.9,94.3-81.9l689,5c0,0,645,5,751.9,6s90.1-93,90.1-93s20-468,14-576s-96.2-89.6-96.2-89.6S288,2039,208,2034.4
		S120,1931,120,1931s13-1156,6-1184s4-60,10-89c0-33,141-28,141-28s764-1,867,0s154-11,169-19c36.8-10.9,26.8-27.7,28-53l2.5-525.5"
		stroke="tomato" fill="none" stroke-width="4"/>
    <polygon class="st11" id="etoile" stroke="tomato" fill="none" stroke-width="4" points="1367.7,59.8 1345.4,49.8 1324.5,62.3 1327.3,38.3 1308.8,22.4 1332.8,17.6 1342.3,-4.7 1354.3,16.3 
		1378.7,18.4 1362.2,36.2 "/>
</g>
</svg>

如何才能正确地在路径指引上对SVG多边形进行动画处理？

Answer 1

你有两个错误。

1. 星星的中心应该在svg画布的原点(x=0; y=0).
2. 路径 trace 必须反过来。它的绘制方式（从下往上）会使星星从文档的底部开始移动到顶部。

function positionTheElement() {
	var html = document.documentElement;
  
	var body = document.body;
	var scrollPercentage = (html.scrollTop + body.scrollTop) / (html.scrollHeight - html.clientHeight);
	var path = document.getElementById("trace");
	var pathLen = path.getTotalLength();
	var pt = path.getPointAtLength(scrollPercentage * pathLen );
	var element = document.getElementById("etoile");
	element.setAttribute("transform", "translate("+ pt.x  + "," + pt.y + ")");
};
window.addEventListener("scroll", positionTheElement);
positionTheElement();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg viewBox="0 0 1920 4000" >
<g>
	<path class="st12" id="trace" d="M1343.5,32.5
           L1341,558C1339.8,583.3 1349.8,600.1 1313,611C1298,619 1247,631 1144,630C1041,629 277,630 277,630C277,630 136,625 136,658C130,687 119,719 126,747C133,775 120,1931 120,1931C120,1931 128,2029.8000000000002 208,2034.4C288,2039 1697.8,2034.4 1697.8,2034.4C1697.8,2034.4 1788,2016 1794,2124C1800,2232 1780,2700 1780,2700C1780,2700 1796.8000000000002,2794 1689.9,2793C1583,2792 938,2787 938,2787L249,2782C249,2782 151.39999999999998,2769.8 154.7,2863.9C158,2958 155,3552 155,3552C155,3552 159,3645.3999999999996 243.5,3632.7C328,3620 1484,3634 1484,3634L1491.8,3999"
		stroke="tomato" fill="none" stroke-width="4"/>
    <path class="st11" id="etoile" stroke="tomato" fill="none" stroke-width="4" d="M25,33.5l-22.3,-10l-20.9,12.5l2.8,-24l-18.5,-15.9l24,-4.8l9.5,-22.3l12,21l24.4,2.1l-16.5,17.8z"/>
</g>
</svg>