CODEWITHSUNDEEP
javascripthtmlsvg
Yotam Dahan
Yotam Dahan

Reputation: 699

Moving SVG object on guideline using javascript

I'm trying to move SVG object on <path> guideline I created, my code is based on this one, but I can't figure out why mine doesn't work and the codepen I shared does.

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>

How can I animate the SVG polygon on the path guideline correctly?

Upvotes: 2

Views: 81

Answers (1)

enxaneta
enxaneta

Reputation: 33054

You have 2 errors:

  1. the star should have the center in the origin of the svg canvas (x=0; y=0).
  2. the path trace has to be reversed. The way it's drawn (from the bottom up) would make the star begin it's movement from the bottom of the document to the top. 

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>

Upvotes: 1

Related Questions