Tengo una línea SVG que se activa al desplazarse y baja por la página a medida que me desplazo. Quiero que el activador esté en una ubicación específica de la página, pero por ahora, aunque el SVG se encuentra más abajo en la página, comienza a "crecer" tan pronto como el usuario comienza a desplazarse (lo que da como resultado que no haya animación cuando llego en esa ubicación, ya que el SVG ya está todo desplazado).

Aquí está el js de ese SVG en particular:

 var path = document.querySelector('#star-path'); var pathLength = path.getTotalLength(); path.style.strokeDasharray = pathLength + ' ' + pathLength; path.style.strokeDashoffset = pathLength; window.addEventListener('scroll', () => { var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); var drawLength = pathLength * scrollPercentage; path.style.strokeDashoffset = pathLength - drawLength; });

Y aquí está el fragmento html...

 <svg class="svg" width="10" viewBox="0 0 2 150" id="star-svg"> <path id="star-path" fill="none" stroke="black" stroke-width="2" d="M1 0V150" /> </svg>

... así como el css:

 .svg { position: absolute; top: 2900px; left: 1400px; text-align: center; overflow: visible; }

¿Qué elemento corresponde a ese activador y qué debo hacer para "retrasarlo" (soy bastante nuevo en las animaciones SVG)?

Gracias de antemano por tu ayuda