如何获取 svg 的坐标?
如何找到 svg 的坐标?我有一个包含地图的 Adobe Illustrator 文件,该文件已绘制并分为美国各州,我如何找到每个州的坐标?
我仅使用美国地图作为示例,我可能会将这种技术用于其他几张地图(更加本地化!!)。
How can I find out the coordinates of an svg? I have an Adobe Illustrator file that contains a map, this has been drawn and separated into US states, how can I find the coordinates of each state?
I'm just using the US map as an example, I'm going to potentially use this technique for several other maps (much more local!!).
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
Inkscape 的表现非常出色。它有一个命令界面,如 http://tavmjong.free.fr/ 中所述INKSCAPE/MANUAL/html/CommandLine.html 。 (该链接是 作者 Tavmjong Bah 网站上的手册副本。请注意,警告说该手册尚未针对最新版本的 Inkscape 进行更新。但是,当我尝试使用该命令时,该命令运行良好。)
该命令
将输出包含元素 id、左上角的 x 和 y 坐标的行,和元素的宽度和高度。 SVG 的每个元素都有一行。下面是一个示例:
此示例来自 http://tavmjong.free。 fr/INKSCAPE/MANUAL/html/CommandLine-Query.html 。它从包含星形的 SVG 中提取信息,如我的第一个链接所示。
在我的 Windows 10 系统上,Inkscape 位于 c:\Program Files\Inkscape\ 中,可执行文件位于该目录的 bin\ 子目录中。如果我
cd
到该子目录,Windows 将识别inkscape
命令;同样,如果我使用其他地方的可执行文件的完整路径,例如将其放在我的 PATH 上大概也可以工作。
Inkscape 还有许多其他命令,其中包括用于提取有关对象位置和大小信息的其他命令。后者称为“查询命令”。可以提取有关指定对象的信息,例如,
这是在Linux系统上的默认图标文件中查找放大图标的x位置的示例。
要将输出保存到文件,请使用
>
。例如,由于看到实际示例令人放心,这里有两个该工作的屏幕截图。
一旦文件中包含数据,您就可以将其读入程序中。下面是我在 R 编程语言中使用
read_csv
函数执行此操作的屏幕截图 (https://readr.tidyverse.org/reference/read_delim.html )。这会将数据放入表格中,然后将其显示出来。Inkscape does that beautifully. It has a command interface, described in http://tavmjong.free.fr/INKSCAPE/MANUAL/html/CommandLine.html . (The link is to a copy of the manual on the website of its author, Tavmjong Bah. Note that it warns that the manual hasn't been updated for the latest version of Inkscape. However, the command worked fine when I tried it.)
This command
will output lines containing an element id, the x and y coordinates of the top-left corner, and the element's width and height. There is one line for each element of the SVG. Here's an example:
This example comes from http://tavmjong.free.fr/INKSCAPE/MANUAL/html/CommandLine-Query.html . It extracts information from an SVG which includes a star shape, shown on my first link.
On my Windows 10 system, Inkscape lives in
c:\Program Files\Inkscape\
, and the executables are in the bin\ subdirectory of that. If Icd
to that subdirectory, Windows will recognise theinkscape
command; likewise if I use the full path to the executable from somewhere else, e.g.Putting it on my PATH would presumably also work.
Inkscape has a lot of other commands, which include others for extracting information about object positions and sizes. The latter are called "query commands". One can extract information about a specified object, e.g.
This is an example of finding the x position of the zoom-in icon in the default icon file on a Linux system.
To save the output to a file, use
>
. E.g.As it's reassuring to see actual examples, here are two screenshots of this working.
Once you have the data in a file, you can read it into programs. Below is a screenshot of me doing this in the R programming language, using the
read_csv
function ( https://readr.tidyverse.org/reference/read_delim.html ). This puts the data into a table, which I then displayed.SVG 具有 XML 结构。状态将位于
标记中,希望在某处将状态名称作为属性。路径的坐标由 d 属性定义,但它们可能会变得相当复杂,因为它们可以是相对的或绝对的,并且具有各种类型的曲线。对于曲线,最简单的方法可能是只考虑最后两个值,即曲线的终点。有关完整详细信息,请参阅:http://www.w3.org/TR/SVG /paths.html#PathDataGeneralInformation
如果对路径应用进一步的转换,情况可能会更加复杂。祝你好运!
SVG have an XML structure. The states will be in
<path>
tags, hopefully with the name of the state somewhere as an attribute. The coordinates of a path are defined by thed
attribute, but they can get quite complex as they can be relative or absolute and have various types of curves. With curves, it's probably simplest to consider just the final two values, which is where the curve ends.For full details, see: http://www.w3.org/TR/SVG/paths.html#PathDataGeneralInformation
The situation may be more complex if further transforms are applied to the paths. Good luck!