如何将图像附加到渐进式和可滚动SVG路径图的末尾？

Question

我有一个逐步绘制的SVG路径。 （我使用了W3Schools https://www.w3schools.com/howto/howto_js_scrolldrawing.asp中的代码。）我在路径的末尾有一个需要的图像。 （主体的高度大约为6000px，有很多部分。我已将svg元素放置在主要内容的内部。）如何在图像上标出svg路径？

这是我的CSS，路径和脚本：

        <style>
        #mySVG {
             position: absolute;
             z-index: 10;
             padding-top: 30px;
             margin-left: -24px;
             max-height: 5000px;
        }
        </style>

        <svg id="mySVG" width="100%" height="100%" viewBox="0 0 1700 3850" preserveAspectRatio="xMinYMin meet" style="border-bottom:1px solid red;">
            <g style="position:relative"><path fill="none" stroke="#fff" stroke-width="24" id="whiteline" d="M0 0 L1600 1250 L500 2525 L1300 3850" /></g>   
        </svg>

        <script>

        var whiteline = document.getElementById("whiteline");
        var length = whiteline.getTotalLength();
        whiteline.style.strokeDasharray = length;
        whiteline.style.strokeDashoffset = length;

        window.addEventListener("scroll", myFunction);

        function myFunction() {
        var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

        var adjustedscrollpercent = scrollpercent * 1.4;
        var draw = length * adjustedscrollpercent;
        whiteline.style.strokeDashoffset = length - draw;

        }

        </script>

任何帮助将不胜感激。