4

场景：想要在特定城市的地图上提供丰富的图形图表。由于我找不到那个城市的官方 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的输出之间的区别。

前提条件：

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

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

从浏览器加载的 SVG

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

现在，如果我尝试使用 object 标签通过 html 加载图像，它可以工作。 在此处输入图像描述

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

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

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

4

2 回答 2

3

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

  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 输出之间的区别。

于 2013-10-21T11:07:33.987 回答
0

在 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));
      }
    }
于 2018-01-11T19:23:11.383 回答