Inkscape如何突出显示SVG的不同部分并在HTML中操作SVG地图

Question

情境：想在特定城市的地图上提供丰富的图形图表。由于找不到该城市的官方svg版本地图，我决定自己尝试制作。

我成功获得了该城市的官方pdf地图，并使用inkscape将其转换为svg格式。我希望能够在区级别上操作地图。使用inkscape，我可以将区域的边界划分为更小的子区域，然后对这些子区域进行操作或处理。

区级别是inkscape术语中的路径（paths）。

a）在Inkscape中选择路径编辑节点选项后，如何分割单个区域（进一步划分的区域），使其显示为路径。我无法实现此分割。

b) 给定svg，然后将其导入到html中。如何操作svg dom以获取地图上特定部分的数据（例如，如果我单击a中的子区域，则能够获取该区域的数据）。这是可能的吗？如果可以，那么关于如何进行操作的提示/指针将不胜感激。

谢谢！

PS：请解释您的downvote。

编辑：添加有关研究的信息。事实证明，在我前往另一侧并尝试使用jvectormap并获得所需内容之后回来看这个问题时，我犯了一个错误，即onClick（）与onclick（）（..argh）之间的区别。无论如何，在此添加详细信息以显示它确实有效，但我无法调整图像的尺寸，并且会在下面发布解决方案的替代方法。 PS：我对SVG的经验为2天，因此根据我从其他解决方案中学习的有关操作图像的知识，我已经正确地放置了SVG。也许@robert-longson可以解释inkscape与svg-edit的svg输出之间的区别。

先决条件：

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

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

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

现在，如果我尝试使用对象标记通过html加载图像，它可以工作。 然而，即使在svg标签中调整了它或如此处建议的那样调整了它，我仍然无法调整图像的尺寸。

目前，我已经转向其他解决方案，主要是因为突出显示区域能力在优秀的jvectormap库中可用。

编辑：这个gist展示了使用Inkscape制作的SVG。在SVG编辑器中打开相同的文件，然后查看源代码；似乎对“路径数据”进行了转换：即路径的d属性。最终，在svgto.jvectormap中能够正常运行的是这种转换输出。

- sunny

---

对于a)这取决于Inkscape所做的导入类型，对于类似的情况，我需要复制区域并制作路径的“拼贴”，直到轮廓完成；对于b)，请参见类似的问题。 - Paolo Gibellini

a) 这似乎是关于如何使用Inkscape的问题，应该放在Super User而不是这里。 b) 没有展示出任何研究努力。你尝试过如何操作DOM，遇到了什么问题或困难？ - Robert Longson

a) Inkscape是可用的标签之一。我实际上不熟悉超级用户与stackoverflow问题之间的区别。 b) 当然！我正在使用从Inkscape生成的SVG。我尝试使用JavaScript在控制台中进行操作，但是onhover、onclick属性在SVG元素上不可用。因此，问题是“是否可能”？这是当SVG直接由浏览器呈现时。如果您根据各种选项将SVG包含在HTML中，您将无法再访问SVG DOM（或者至少我无法做到）。 - sunny

然而，作为开发人员的痒点很难去除，我使用了inkscape、jvectormap和svg-editor的组合解决了这个问题，我将其发布为答案以供任何试图做同样事情的人参考。 - sunny

onclick是可用的，所以你尝试了它却没起作用。告诉我们你尝试了什么，我们很可能能告诉你为什么它没起作用。你做了研究工作，只是没有把它写在问题里！ - Robert Longson

我本以为有眼光的用户会给提问者一些怀疑的空间，认为他们已经做了一些研究或至少在下投票之前进行澄清。我尽力提供了尽可能多的信息来表达我的问题；也许对你来说还是有点不够清晰。 - sunny

Answer 1

我能简要地如下所示达成需求:

1. 使用Inkscape将SVG转换为PDF
2. 切割节点以从svg中获取路径。
3. 使用Inkscape将区域（区级别）分解为路径。
4. 将此svg上传到svg-edit工具中。
5. 使用步骤4中的工具生成的svg，喂入转换svg为jvectormap的工具here。

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

   更多细节请见

   • 长版本（含视频）可在here找到。
   • 最终输出可在here查看。

也许@RobertLongson可以解释一下Inkscape和svg-edit之间的SVG输出差异是什么。

- sunny

---

其实它们没有任何区别，它们都输出SVG。你在回答中提出了一个非常普遍的问题，但我想你可能有一些具体的想法，而我无法猜测。 - Robert Longson

@RobertLongson，我已经更新了问题，并附上了相关的要点，以展示差异。 - sunny

感谢@sunny提供这个简单的教程，非常好用。 - ivica

Answer 2

在Angular/JS应用程序中使用它的另一种解决方案是，我这里使用Typescript和导出的inskscape svg。首先，在Inkscape中使用对象属性中的标签标签（而不是ID！如果您要使用多个映射），对要操作的每个元素进行标记。然后通过标记名称获取您的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));
      }
    }

- andrea06590