关于操控SVG地图的建议

11 投票

2 回答

4813 浏览

数据工程师

提问于 2025-04-15 17:57

我正在为维基百科制作加利福尼亚州的本土语言地图。这个地图上有不同的区域，每个区域对应一种语言。原始地图长这样（点击查看SVG）：

我想手动为每种语言制作“定位地图”（使用Inkscape），就像这个为一种叫做Cahuilla语言（语言代码是cah）制作的地图：

不用说，如果我在Inkscape里手动生成60多个地图，那真是太麻烦了。

更糟糕的是，每当我在原始地图中发现错误时，我都得重新制作一整套定位地图。（实际上，我最近意识到我的原始地图完全漏掉了一种语言。抱歉，Cupeño。）

所以我的目标是自动化这个过程。我对处理SVG或XML的经验不多，所以我在寻找一些推荐的库，最好是Python的解决方案，因为我对这门语言还算有点基础。

总结一下，我需要：

获取原始SVG文件中所有语言形状的引用列表。

对于这个列表中的每种语言：

改变当前语言形状的背景颜色
在语言周围加一个框
复制这个框并调整到指定大小（我知道在这一步可能很难像我示例中那样“裁剪”周围的形状——只要在白色背景上创建一个包含语言形状的框就足够了。）
把复制的框放在右上角
把所有这些保存到code.svg文件中

最终的产品将是60个SVG文件，命名为cah.svg等。如果需要编辑原始地图（这很可能），还可以重新生成整个文件。

xml处理数据可视化自动化 svg 地图制作图形编辑语言定位 inkscape

2 个回答

这里有一个示例，使用了你的地图。你可以点击任何元素来获取它的边界框，这个边界框可以用来设置小视图的视口（需要稍微调整一下）。如你所见，这对地图的代码没有增加太多，只是增加了几个元素。当你有了所有的视口后，可以通过javascript动态更新小视图的'viewBox'属性。

关于选中形状的颜色，我建议在小视图的<svg>里面添加一个<use>元素，这个元素的填充颜色会覆盖主地图中使用的任何填充颜色（你可能需要使用样式表规则来确保它的优先级很高，比如添加#miniview .activeshape { fill: red !important }）。让<use>指向被选中的形状，并确保你在指向的形状上添加class="activeshape"。

这至少应该是一个开始，希望对你有帮助 :)

回答于 2025-04-15 由 Python大师

分享举报

我建议你使用Python，特别是为Inkscape创建扩展。我觉得你不需要60个SVG文件，除非你真的想要，因为源地图里会包含你需要的所有内容。

我会用Inkscape把不同的区域重命名为你要使用的语言代码。比如，Cahuilla或者cah在你的SVG文件里现在是path13882。我会把它改成cah或者Cahuilla，然后对每个语言区域重复这个过程。可以用编辑器中的XML编辑功能，确保你更新了所有的路径。

在你更新了名字和ID之后，可以考虑一下SVG脚本。我会创建一个JavaScript或ECMAScript的映射或字典，里面包含与语言相关的信息：

var langaugeMap = {};
languageMap["cah"] = { name: "Cahuilla", color: "rgb(255, 0, 0)" };
languageMap["cup"] = { name: "Cupeño", color: "rgb(255, 64, 0)" };
// and so on -- this could even be generated from a CSV file or Excel, etc.
// if the highlighted color is always the same, then you don't need it in the map
// or use style sheets for an activeshape and inactiveshape
// Put any information that is specific to a language in the map

接着你只需要添加一个鼠标悬停的功能，这样可以添加和定位边框框，并改变路径的颜色。这是一个关于事件和脚本的例子，虽然有点过时了。Carto.net也有一个互动地图的例子。

SVG看起来大概是这样的：

<path
   style="fill:#800000;fill-opacity:1;display:inline"
   d="m 422.43078,517.40746 c 0.52151,0.006 1.10755,0.0374 1.75925,0.0825 3.82011,0.26462 5.01088,0.75501 5.75001,2.37491 0.51312,1.12355 2.4121,3.0097 4.22213,4.1946 3.906,2.55656 7.38824,2.07964 9.61517,-1.3194 2.12996,-3.25075 9.13451,-3.19196 13.61739,0.11545 1.77185,1.30707 4.04994,2.38037 5.06319,2.38041 1.01325,0 3.34593,0.92548 5.18421,2.06155 2.52816,1.56236 4.9918,2.09869 10.09889,2.19902 3.71359,0.0729 7.68145,0.64349 8.82374,1.26442 2.81717,1.53202 5.67633,1.42382 10.7693,-0.40133 4.97461,-1.78261 6.31161,-1.36525 17.10267,5.31063 3.39862,2.10239 6.90491,4.08094 7.7956,4.39801 2.46593,0.8776 4.55428,4.66976 3.95259,7.17971 -0.29359,1.22605 -0.75898,3.51121 -1.03349,5.07968 -0.27411,1.56855 -0.88382,3.33952 -1.35761,3.93621 -1.50842,1.89871 -20.98501,7.77151 -27.8945,8.41122 -3.66014,0.33879 -8.3091,1.04337 -10.32987,1.56676 -3.50666,0.90799 -3.81743,0.79746 -6.78388,-2.44089 -3.3486,-3.65594 -6.11308,-4.2716 -8.48815,-1.89661 -2.14408,2.14401 -1.85126,3.96434 1.0667,6.66846 1.40725,1.30409 1.85699,2.10446 1.00027,1.77571 -0.85672,-0.32883 -6.3937,-0.12213 -12.3033,0.46176 -5.9096,0.58386 -12.56062,1.27336 -14.78297,1.53381 -4.17058,0.4888 -5.09869,-0.37014 -2.61673,-2.42989 2.1563,-1.78956 1.74245,-2.63318 -1.65999,-3.36449 -1.69931,-0.36525 -4.94789,-1.90738 -7.213,-3.42496 -2.26473,-1.51754 -5.89662,-3.66823 -8.07583,-4.77731 -2.17921,-1.10923 -6.21922,-3.94186 -8.97721,-6.29463 -4.75318,-4.05478 -4.93682,-4.36681 -3.43604,-6.02527 0.96935,-1.07117 2.36209,-1.56397 3.5899,-1.26992 1.62639,0.38937 2.49494,-0.41237 4.59588,-4.24958 1.42481,-2.60257 2.23686,-4.95457 1.80316,-5.22266 -0.4337,-0.26805 -1.06784,-3.14557 -1.40725,-6.39358 -0.33978,-3.24797 -1.19001,-6.79064 -1.89134,-7.87242 -1.74322,-2.68957 -1.2114,-3.65437 2.44111,-3.61188 l 0,0 z"
   id="cah"
   inkscape:label="#cah"
   onmouseover="highlightRegion(evt);"
   onmouseout="restoreRegion(evt);" />

如果你想对SVG文件进行自动化处理，我会使用Inkscape的扩展。可以查看Inkscape的维基，在开发者教程/扩展部分。否则，SVG本质上还是XML格式，所以如果你在源文件中给语言区域起了一个独特的名字，你可以用Python来解析XML，并把每个路径/语言区域保存到一个单独的文件里。

回答于 2025-04-15 由 Python大师

分享举报

关于操控SVG地图的建议

2 个回答

撰写回答