Javascript 使用画布在滚动上设置多个SVG路径的动画

我试图从这篇Codrops文章中扩展JS：

我正在尝试设置多个SVG行的动画，以“分割”SVG路径。为了模拟它，我创建了多条相互重叠的路径。相关的SVG代码如下（）：

该网站仅供参考。它没有更新为包含尝试，因为它显然会破坏它。它关注的是Giaratana和Chiaramonte，这是它应该关注的，但在追踪或突出显示这条道路上没有任何风险

代码在这里供参考。不过它有6.5公里的线路，所以帮不了什么忙

---

我对这个脚本有点不知所措。在过去的72小时里，我一直在使用它和谷歌。哈哈。

不清楚你想做什么。你还没有真正解释你所说的“分道扬镳”是什么意思。看起来“拉古萨”的小道分叉了，那你想发生什么呢？嗯。。。没有什么。路径到此结束，但主路径继续。我意识到这个问题措词不当，我是个白痴，因为源文件是ES2015。我正在查看编译后的JavaScript文件。

<g id="trail-path" display="none">
    <path display="inline" d="M1058.75,817.41a159.76,159.76,0,0,0,11.15-18.24c1.16-2.23,2.31-4.72,1.75-7.17-.64-2.81-3.29-4.65-5.8-6.06a77.9,77.9,0,0,0-29.34-9.42c-4.94-.55-10-.63-14.73-2.09s-9-4.25-13.21-7Q982,749.77,956.19,731.08c-5.52-4-6.81-10.78-7.54-17.56s-1.07-14-5.05-19.56c-6.48-9-20-10.06-27.26-18.47-6.31-7.34-6.07-18.23-4-27.69.83-3.83,1.91-7.67,1.73-11.59-.33-7-4.6-13.1-8.71-18.77-5.63-7.76-11.87-16-21-18.91-6-1.91-10.76-6.9-15-11.53s-8.06-9.68-12.69-13.93c-6-5.48-13.25-9.54-18.62-15.63-6.34-7.2-9.47-16.58-13-25.51-.94-2.38-2.11-5-4.46-6-10.45-4.59-20.41-11.33-27.17-20.53-3.37-4.58-5.63-9.85-7.87-15.07-2.61-6.1-5.27-12.39-5.4-19-.17-8.82,4.17-17.39,3.26-26.16-.5-4.79-2.53-9.26-4.53-13.64l-15.15-33.08 
M1058.75,817.41a159.76,159.76,0,0,0,11.15-18.24c1.16-2.23,2.31-4.72,1.75-7.17-.64-2.81-3.29-4.65-5.8-6.06a77.9,77.9,0,0,0-29.34-9.42c-4.94-.55-10-.63-14.73-2.09s-9-4.25-13.21-7Q982,749.77,956.19,731.08c-5.52-4-6.81-10.78-7.54-17.56s-1.07-14-5.05-19.56c-6.48-9-20-10.06-27.26-18.47-6.31-7.34-6.07-18.23-4-27.69,2.67-12.28-.83-25.88,6.72-36.71,3.74-5.37,9.15-9.33,13.36-14.35,11.71-14,12.1-36.16.89-50.53-7.54-9.65-19.06-15.39-27.38-24.38-5.24-5.66-9.07-12.45-12.85-19.17" fill="none" stroke="red" stroke-miterlimit="10" stroke-width="5"/>
</g>

(0, p.default)(this.props.mapSrc).then(function(e) {
                        t.mapSVG = Array.from((new DOMParser).parseFromString(e, "image/svg+xml").childNodes).filter(function(t) {
                            var e = t.tagName;
                            return "undefined" == typeof e ? !1 : "svg" == e.toLowerCase()
                        })[0], t.cameraPath = t.mapSVG.querySelector("#camera-path path"), t.trailPath = t.mapSVG.querySelector("#trail-path path"), t.points = Array.from(t.mapSVG.querySelectorAll("#points circle")).map(function(e) {
                            var i = parseFloat(e.getAttribute("cx")),
                                r = parseFloat(e.getAttribute("cy"));
                            return {
                                x: i,
                                y: r,
                                length: d.getLengthAtPoint(t.trailPath, {
                                    x: i,
                                    y: r
                                }),
                                label: (e.getAttribute("id") || "").replace(/_/g, " "),
                                color: e.getAttribute("fill") || "black",
                                radius: parseFloat(e.getAttribute("r"))
                            }
                        }).sort(function(t, e) {
                            return t.length - e.length
                        }), t.cameraSubdivisions = d.subdividePath(t.cameraPath, t.cameraSubdivisionSize, !0), t.cameraLength = d.getLength(t.cameraPath), t.cameraBreakpoints = t.setupBreakpoints(t.cameraPath), t.trailSubdivisions = d.subdividePath(t.trailPath, t.trailSubdivisionSize, !0), t.trailBreakpoints = t.setupBreakpoints(t.trailPath), t.trailLength = d.getLength(t.trailPath), (0, l.loadImage)(t.props.mapSrc).then(function(e) {
                            t.mapWidth = e.width, t.mapHeight = e.height, 0 == t.mapHeight && (t.mapWidth = 2040, t.mapHeight = 1178), t.map = b(t.mapScales).map(function(i, r) {
                                var n = 1 + (t.mapMaxScale - 1) / (t.mapScales - 1) * r,
                                    s = (0, h.default)(t.mapWidth * n, t.mapHeight * n),
                                    a = s.getContext("2d", {
                                        alpha: !1
                                    });
                                return a.fillStyle = "#a8cecf", a.fillRect(0, 0, t.mapWidth * n, t.mapHeight * n), a.drawImage(e, 0, 0, t.mapWidth * n, t.mapHeight * n), {
                                    map: s,
                                    scale: n
                                }
                            }), t.mapBuffer = (0, h.default)(1, 1), t.mapBufferCtx = t.mapBuffer.getContext("2d", {
                                alpha: !1
                            }), t.updateMapBufferSize(), t.mapBufferCtx.fillStyle = "#a8cecf", t.mapBufferCtx.fillRect(0, 0, t.mapBufferSize.x, t.mapBufferSize.y), t.mapBufferOffset = {
                                x: 0,
                                y: 0
                            }, t.mapBufferScale = t.mapScale, t.ready = !0, document.addEventListener("scroll", t.onScroll.bind(t)), t.onScroll()
                        })
                    })