javascript – 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输出之间的区别.

前提条件：

>使用inkscape将pdf转换为svg
>选择节点,拆分以将文本转换为路径(之前我没有这样做).

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

现在,如果我将svg作为图像加载它不起作用(这是我放弃的地方,因为我首先没有我的区域,并且没有访问svg dom ..duh！).看起来正确的方法是使用object标签加载它.

现在,如果我尝试使用对象标签通过html加载图像,它的工作原理.

但是,即使在svg标签中调整图像尺寸或建议使用here,我也无法调整图像的尺寸

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

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

解决方法:

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

>使用Inkscape将SVG转换为PDF
>剪切节点以从svg获取路径.
>使用Inkscape将区域(区级)拆分为路径.
>将此svg上传到svg-edit工具
>使用4)中工具的svg进入工具,将svg转换为jvectormap here
>在html中使用生成的jvectormap.

更多细节

>带视频的长版本可在here获得.
>最终输出可以在here查看

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

标签：jquery,javascript,maps,svg,inkscape
来源： https://codeday.me/bug/20190629/1324895.html