Javascript Inkscape突出显示svg的不同部分，并在html中操作svg映射

场景：希望在特定城市的地图上提供丰富的图形图表。因为我找不到该城市的官方svg版本地图，所以我决定自己试试

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

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

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

b） 给定svg，然后将其导入html。如何为该映射的特定部分操作svg dom（例如，如果我在a中单击子District，就可以获取该区域的数据）。这可能吗？要操作svg的不同部分，如果需要，请提供有关如何操作的提示/指针

谢谢

PS：请向落选者解释你的落选

编辑：添加有关研究的信息。结果是在我去了另一边，和jvectormap玩了一圈，得到了我需要的东西，然后回来看看这个；我犯的错误是onClick（）对onClick（）（…argh）。在任何情况下，在这里添加细节以表明它确实有效，但是我无法调整图像的尺寸，我将在下面发布解决方案的替代方案。 PS：我使用SVG的经验是2天，因此根据我从另一个解决方案中学习操作图像的经验，我有了合适的SVG。也许@robert longson可以解释inkscape的svg输出与来自inkscape的svg输出之间的区别

先决条件：

使用inkscape将pdf转换为svg

选择节点，拆分以将文本转换为路径（我以前没有这样做）

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

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

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

但是，即使在svg标记中或按照建议对图像进行了调整，我也无法调整图像的尺寸

我现在已经转向我的另一个解决方案，主要是因为突出显示区域功能在优秀的库中可用

---

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

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

使用Inkscape将SVG转换为PDF

剪切节点以从svg获取路径

使用Inkscape将区域（地区级别）拆分为路径

将此svg上载到工具

使用4）中工具中的svg将svg输入到工具中，以将svg转换为jvectormap

在html中使用生成的jvectormap

欲知详情

• 可提供带视频的长版本
• 可以查看最终输出

---

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

在Angular/JS应用程序中使用它的另一个解决方案，我在这里使用的是Typescript和导出的inskscape svg。 首先，在Inkscape中使用对象属性中的标记标签（如果要使用多个映射，则不使用id！）标记要操作的每个元素。然后按标记名获取svg对象，并获取对您有意义的内容，然后添加侦听器：）

this.mySvg=svg.getElementsByTagName（“svg”）[0]；
让myDom=this.mySvg.getElementsByTagName（“*”）；
for（设i=0；ithis.onClick（myDom[i]，样式））；
}
}

对于点a）这取决于Inkscape的导入类型，对于类似的情况，我会复制区域并对路径进行“拼贴”，直到完成轮廓；关于b）点，请参见类似的“为什么否决”投票？请解释。a）似乎是关于如何使用Inkscape，它属于超级用户，而不是这里。b） 没有任何研究成果。您是如何操作DOM的，遇到了哪些问题？a）inkscape是可用的标记之一。实际上，我对超级用户vs stackoverflow问题并不熟悉。b） 当然！我使用的是从inkscape生成的svg。我尝试在控制台中使用javascript进行操作，但是SVG元素上没有onhover、onclick属性。因此，问题是“可能吗”？此时，浏览器直接呈现svg。如果您根据各种可用选项将svg包含在html中，您将无法再访问svg dom（或者至少我无法访问），但是由于开发人员的渴望难以摆脱，我已经使用inkscape、jvectormap、svg编辑器、，我将把它作为一个答案发布给任何试图这样做的人。其实没有什么区别，它们都输出SVG。你问了一个非常普遍的问题

this.mySvg = svg.getElementsByTagName("svg")[0];
let myDom = this.mySvg.getElementsByTagName("*");
    for(let i=0; i < myDom.length; i++) {
      let label = myDom[i].getAttribute('inkscape:label');
      let style = myDom[i].getAttribute('style');
      if (label && style) {
           myDom[i].addEventListener("click", () => this.onClick(myDom[i], style));
      }
    }