我试图从这篇Codrops文章中扩展JS：
https://tympanus.net/Development/StorytellingMap/
我尝试将多个SVG线设置为动画，以便＆＃34;分割＆＃34; SVG路径。为了模拟它，我创建了多个彼此重叠的路径。相关的SVG代码就是这样（for reference, example）：
<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>
我90％确定我应该主要关注的代码就在这里。我只需要一种方法来为每个路径组件迭代它。我正在看＆＃34; t.trailPath＆＃34;和＃34;＃trail-path。＆＃34;中包含的路径我最初尝试了多个分组路径元素并迭代它们但它没有工作（并且理所当然，因为我意识到这是错误的方法）。
(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()
})
})
该网站供参考。它没有更新，以包括尝试，因为它显然打破了它。它将焦点放在Giarratana和Chiaramonte旁边，但是没有骰子可以追踪或突出显示路径。
https://adrianatwell.github.io/bond-of-strangers/code/html/
此处的代码仅供参考。它的6.5K线虽然没有多大帮助。
https://github.com/adrianatwell/bond-of-strangers/blob/master/code/html/assets/js/app.js
我似乎已经开始使用这个脚本了，在过去的72小时里，我一直在使用它和Google。哈哈。