Inkscape突出显示svg的不同部分，并在html中操作svg映射
场景：想要在特定城市的地图上提供丰富的图形图表。 由于我找不到该城市的官方svg版本地图，我决定亲自尝试。
我能够获得城市的官方pdf地图，并使用inkscape将其转换为svg。 我希望能够在地区层面上操作地图。 使用Inkscape，我可以将区域的边界进一步划分为我想要处理的分区。 然后，我想操纵或在这些分区工作。
区级是路径（inkscape术语）。
a）在Inkscape中，通过路径选项选择编辑节点后，如何拆分单个区域（区域）以便它们显示为路径。 我无法实现这种分离。
b）鉴于svg，我然后将其导入到html。 我该如何操作svg dom以查找该地图的特定部分（例如，如果我要单击a中的子区域）能够获取该区域的数据）。 这可能吗 ？ 操纵svg的不同部分，如果是这样的提示/指示如何去了解它将不胜感激。
谢谢！
PS：请向downvoter解释你的downvote。
编辑：添加有关研究的信息。 事实证明，在我走到另一边后，用jvectormap玩弄了我所需要的东西，然后回过头来看看这个; 我做的错误是onClick（）vs onclick（）（..argh）。 在任何情况下，在这里添加细节来表明它可以工作，但是我无法调整图像的尺寸，并且我将在下面发布解决方案的替代方案。 PS：我对SVG的使用经验是2天，所以根据我对操作来自其他解决方案的图像的学习，我拥有了合适的svg。 也许@robert-longson可以解释来自inkscape的svg输出和svg-edit的svg输出之间有什么区别。
前提条件：
这主要是为了b）部分我添加了一个onclick事件并绘制了我对红色感兴趣的区域。 所以，如果我要从浏览器加载svg（并加载jquery），那么点击选定的区域就可以按预期工作。
现在，如果我要将svg作为图像加载，它不起作用（这是我放弃的地方，因为我没有我的地区，并且没有使用svg dom .duh！）。 看起来正确的方式是使用object标签加载它。
现在，如果我试图通过HTML使用对象标签加载图像它的作品。 
但是，即使在svg标签中调整图像或按照此处的建议进行调整后，我仍然无法调整图像的尺寸
我现在已经分支到我的另一个解决方案，主要是因为区域功能的突出显示在杰出的jvectormap库中。
编辑：这个要点显示使用Inkscape制作的svg。 在svg-editor中打开相同的文件，然后查看源代码; 在“路径数据”上有某种转换：路径的d属性。 这是转换后的输出，最终在svgto.jvectormap中运行良好。
简而言之，我能够实现我所需要的：
在html中使用生成的jvectormap。
更多细节
也许@RobertLongson可以解释来自inkscape的svg输出与来自svg-edit的svg输出之间有什么区别。
在Angular / JS App中使用它的另一个解决方案，我在这里使用Typescript和导出的inskscape svg。 首先使用“对象属性”中的标签标签（如果要使用多个贴图，请使用标签标签）在Inkscape中标记要操作的每个元素。 然后通过标记名得到你的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));
}
}
上一篇: Inkscape highlight different parts of a svg and manipulate the svg map in html
下一篇: Any route to go from inkscape design to html5 with animations?