Inkscape 突出显示 svg 的不同部分并在 html 中操作 svg 地图

Question

场景：想要在特定城市的地图上提供丰富的图形图表。由于我找不到该城市的官方 svg 版本地图，所以我决定自己尝试一下。

我获得了该城市的官方 pdf 地图，并使用 inkscape 将其转换为 svg。我希望能够在地区级别操作地图。使用 inkscape，我可以将区域边界进一步划分为我想要处理的分区。然后我想操纵或在这些分区上工作。

地区级别是路径（在 inkscape 术语中）。

a) 在 Inkscape 中，选择“按路径编辑节点”选项后，如何分割各个区域（进一步的区域）以便它们显示为路径。我没能实现这种分裂。

b) 给定 svg，然后我将其导入到 html 中。我如何操作该地图的特定部分的 svg dom（就像我单击 a 中的子区域一样）能够获取该区域的数据）。这可能吗 ？操作 svg 的不同部分，如果是的话，我们将不胜感激有关如何操作的提示/指针。

谢谢！

PS：对于投反对票的人，请解释您的反对票。

编辑：添加有关研究的信息。事实证明，当我走到另一边并使用 jvectormap 并得到我需要的东西并回来查看这个之后；我犯的错误是 onClick() 与 onclick() ( ..argh )。无论如何，在此处添加详细信息以表明它确实有效，但是我无法调整图像的尺寸以及我将在下面发布的解决方案的替代方案。PS：我使用 SVG 的经验是 2 天，所以根据我从其他解决方案中操作图像的学习，我已经有了正确的 svg。也许 @robert-longson 可以解释 inkscape 的 svg 输出与svg-edit的 svg 输出之间的区别。

前提条件：

1. 使用 inkscape 将 pdf 转换为 svg
2. 选择节点，分解以将文本转换为路径（我之前没有这样做）。

这主要是针对 b) 部分，我添加了一个 onclick 事件并将我感兴趣的区域涂成红色。因此，如果我按原样从浏览器加载 svg（并加载 jquery），那么单击所选区域时它会按预期工作。

现在，如果我将 svg 作为图像加载，它就不起作用（这是我放弃的地方，因为我一开始就没有我的地区，并且无法访问 svg dom ..duh！）。正确的方法似乎是使用对象标签加载它。

现在，如果我尝试使用对象标签通过 html 加载图像，它就可以工作。

但是，即使在 svg 标签中调整图像尺寸或按照此处的建议进行调整后，我也无法调整图像的尺寸

我现在已经分支到我的其他解决方案，主要是因为优秀的jvectormap库中提供了区域功能的突出显示。

编辑：这个要点显示了使用 inkscape 制作的 svg。在 svg-editor 中打开相同的文件，然后查看源代码；“路径数据”有某种转换：路径的 d 属性。正是这个转换后的输出最终在 svgto.jvectormap 中运行良好。

Answer 1

简而言之，我能够实现我所需要的：

1. 使用 Inkscape 将 SVG 转换为 PDF
2. 剪切节点以获取 svg 中的路径。
3. 使用 Inkscape 将区域（区级）分解为路径。
4. 将此 svg 上传到svg-edit工具
5. 使用 4) 中工具中的 svg 将其输入到工具中以将 svg 转换为jvectormap

6. 在 html 中使用生成的 jvectormap。

   更多细节

   • 带视频的长版本可在此处获取。
   • 最终输出可以在这里查看

也许@RobertLongson 可以解释 inkscape 的 svg 输出与 svg-edit 的 svg 输出之间的区别。