Мой SVG рисовать на прокрутке от середины, я хочу начать сверху

Question

<svg id="route "xmlns="http://www.w3.org/2000/svg" version="1.1" width="712px" height="2018px" viewBox="0 0 712 2018" class="hidden-xs hidden-sm">
<path id="triangle" fill="none" stroke="red" stroke-width="5" d="M-3.215,2030.921
c8.816-23.698,1.293-50.813,11.855-74.949c13.239-30.25,36.07-52.368,63.675-68.83c39.115-23.327,200.048-39.239,241.599-39.239 c85.812,0,169.935-1.5,251.667-17.933c74.616-15.001,99.381-62.185,103.271-132.082c7.2-129.404-162.375-182.709-261.459-210.021 c-66.561-18.348-117.888-37.01-175.849-77.998c-40.217-28.439-112.694-81.217-96.218-141.023
c35.773-129.859,256.615-74.554,349.684-99.021c67.062-17.629,147.101-35.616,189.606-92.854
c45.659-61.482,39.673-120.866-5.028-180.841c-37.314-50.064-126.141-67.693-184.915-80.39
c-90.278-19.498-192.558-10.397-279.444-44.865c-74.021-29.363-167.793-73.691-193.513-156.378
c-17.428-56.03-20.716-143.802,36.015-181.982c58.886-39.631,148.526-40.825,216.305-49.425
c71.297-9.047,146.186-9.725,215.652-23.335c74.498-14.597,140.473-30.115,189.976-93.165
c32.844-41.83,53.193-89.854,24.771-156.016C641.086-13.609,557.179,7.892,440.83,7.892"/>
</svg>

Над моим SVG-кодом указан простой путь кривой линии.

И мой код JavaScript, который я хочу запустить, но он рисует с середины:

var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();

triangle.style.strokeDasharray = length;

triangle.style.strokeDashoffset = length;

window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    var draw = length * scrollpercent;
    triangle.style.strokeDashoffset = length - draw;
}

Answer 1

Для того, чтобы это началось сверху, я поменял путь. Я надеюсь, что это то, что вам нужно.

var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();

triangle.style.strokeDasharray = length;

triangle.style.strokeDashoffset = length;

window.addEventListener("scroll", myFunction);

function myFunction(e) {

var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    var draw = length * scrollpercent;
    triangle.style.strokeDashoffset = length - draw;
}

<svg id="route "xmlns="http://www.w3.org/2000/svg" version="1.1" width="712px" height="2018px" viewBox="0 0 712 2018" class="hidden-xs hidden-sm">
<path id="triangle" fill="none" stroke="red" stroke-width="5" d="M440.83,7.892C557.179,7.892 641.086,-13.609 694.435,110.574C722.857,176.736 702.508,224.76 669.664,266.59C620.161,329.64 554.186,345.158 479.688,359.755C410.222,373.365 335.333,374.043 264.036,383.09C196.257,391.69 106.617,392.884 47.731,432.515C-9,470.695 -5.712,558.467 11.716,614.497C37.436,697.184 131.208,741.512 205.229,770.875C292.115,805.343 394.395,796.242 484.673,815.74C543.447,828.437 632.274,846.066 669.588,896.13C714.289,956.105 720.275,1015.489 674.616,1076.971C632.111,1134.209 552.072,1152.196 485.01,1169.825C391.941,1194.292 171.09,1138.987 135.326,1268.846C118.85,1328.652 191.327,1381.43 231.544,1409.869C289.505,1450.857 340.832,1469.519 407.393,1487.867C506.477,1515.179 676.052,1568.484 668.852,1697.888C664.962,1767.785 640.197,1814.969 565.581,1829.97C483.849,1846.403 399.726,1847.903 313.914,1847.903C272.363,1847.903 111.43,1863.815 72.315,1887.142C44.71,1903.604 21.879,1925.722 8.64,1955.972C-1.922,1980.108 5.601,2007.223 -3.215,2030.921"/>
</svg>