为具有多个路径的地图设计优化的SVG

Question

我有一个从shapefile创建的SVG，假设大约有100个城市。我还预先计算了这些城市之间的最短旅行路径。当您单击任意两个城市时，我希望显示它们之间的最短路径。问题是，我至少有10,000-30,000条路径，这取决于我有多少个城市(# of cities选择2个)。此外，路径被划分为不同的类型(例如，道路与高速公路)，因此选择2条路径的城市数量甚至更多。

SVG的大小从几MB到100MB不等，这取决于我对SVG所做的详细程度和优化。因此，我不是在问如何优化SVG，我感兴趣的是我是否可以重新考虑我目前的方法。现在，我只是将所有路径放在SVG中，并将它们设置为隐藏，并在选择两个城市时更改属性。我在想，如果我不能将路径存储在其他文件中，并使用脚本以交互方式将它们注入SVG中，那么它们只会按需加载。最终的目标是在一台机器上有一个很好的交互式地图来展示想法，所以我并不完全有必要因为服务器端的原因而进行优化。

有没有人有什么想法或读物可以给我看？对于这类问题，我还是个新手，我对必须存在的公认智慧持开放态度。

Answer 1

我不是将每条可能的路径都放在SVG中，而是将它们分成单个节点到节点连接，并在选择逻辑中存储哪条路径使用哪条连接。这样，您将大大减少SVG元素的数量，能够以更好的可压缩格式存储最短路径数据。

Answer 2

我和我的学生一起做了一些事情，可能会回答你的问题，关于动态添加更多的svg路径。它可以在一个HTML文档中完成，外加几行Javascript。

1. 主svg直接包含在html中，但只具有最少的功能：
2. 更多数据，如几个

..。

存储在json文件中，如下所示：

{ "items"：{"id":"name1"，"d":"path_data1 ... "}，{"id":"name2，"d":"..."}，...}

• 然后使用几行javascript:通过ajax获取json数据，解析，并构建尽可能多的项目

<路径...>

• 将您的代码行添加到svg：(更新:使用svg命名空间)

var g= document.querySelector("#fullg")，ng = document.createElementNS("http://www.w3.org/2000/svg"，'g')，np = document.createElementNS("http://www.w3.org/2000/svg"，'path')；ng.setAttribute("id"，"the_name_for_that_g")；np.setAttribute("id"，"the_name_for_that_path")；np.setAttribute("d"，"the_d_data_for_that_path")；ng.appendChild(np)；g.appendChild(ng);