从SVG文件中提取路径的坐标

I'm trying to find percise coordinates from a path in Adobe Illustrator to use in an HTML image map and someone suggested I save the path as an SVG file, however when I open the SVG in note pad, I get the following:

我试图从adobeillustrator中的路径中找到要在HTML图像地图中使用的详细坐标，有人建议我将路径保存为SVG文件，但是当我在记事本中打开SVG时，我得到了以下结果:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="300.96px" height="248.16px" viewBox="0 0 300.96 248.16" enable-background="new 0 0 300.96 248.16" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M81.6,152.64c7.519,0,15.041,0,22.56,0
    c-0.64,2.88-1.28,5.76-1.92,8.64c-0.16,2.4-0.32,4.8-0.48,7.2c-0.16,0-0.32,0-0.48,0c0,2.56,0,5.121,0,7.68
    c-0.659,2.333,0.264,6.49-0.48,9.12c-0.16,0-0.32,0-0.48,0c0,1.6,0,3.2,0,4.8c-0.16,0-0.32,0-0.48,0
    c-0.584,2.076,0.248,5.349,0.48,6.72c0,1.6,0,3.2,0,4.8c-0.16,0-0.32,0-0.48,0c-0.364,1.869,0.809,1.523,0.96,1.92
    c0.56,1.47-0.759,3.551-0.96,4.32c0.16,1.12,0.32,2.24,0.48,3.36c0.16,0,0.32,0,0.48,0c0.488,1.604-0.283,3.241-0.48,4.32
    c-0.96-0.16-1.92-0.32-2.88-0.48c-0.48,1.44-0.96,2.88-1.44,4.32c0,0.8,0,1.6,0,2.4c-0.16,0-0.32,0-0.48,0c0,1.12,0,2.24,0,3.36
    c-0.16,0-0.32,0-0.48,0c0,1.12,0,2.24,0,3.36c-0.16,0-0.32,0-0.48,0c0.16,2.24,0.32,4.48,0.48,6.72c-0.16,0-0.32,0-0.48,0
    c0,0.64,0,1.28,0,1.92c-0.16,0-0.32,0-0.48,0c0,0.32,0,0.64,0,0.96c-0.32,0.16-0.64,0.32-0.96,0.48c0,0.32,0,0.64,0,0.96
    c-0.32,0.16-0.64,0.32-0.96,0.48c-0.451,1.146,1.519,3.296,0,4.32c-0.32,0-0.64,0-0.96,0c-1.875,2.142-4.972,1.148-7.2,0.48
    c-2.72,0-5.44,0-8.16,0c-0.933-1.886-1.007-2.403-3.84-2.4c0-0.48,0-0.96,0-1.44c1.326-0.347,1.074-0.134,1.44-1.44
    c0.16,0,0.32,0,0.48,0c0-0.64,0-1.28,0-1.92c0.16,0,0.32,0,0.48,0c0.32-1.76,0.64-3.52,0.96-5.28c-0.48-0.16-0.96-0.32-1.44-0.48
    c-0.16-0.8-0.32-1.6-0.48-2.4c-1.045-0.202-1.367-0.318-1.92-0.96c1.975-1.655,1.015-4.196,1.92-6.72c2.88-0.64,5.76-1.28,8.64-1.92
    c0.633-2.939,2.051-6.325,2.88-9.12c0.455-1.531-0.247-3.995-0.48-4.8c-0.32-3.199-0.64-6.4-0.96-9.6c0-1.027,0.48-0.96,0.48-0.96
    c-0.16-5.6-0.32-11.201-0.48-16.8c0-2.879,0-5.76,0-8.64c-0.16,0-0.32,0-0.48,0c0-1.6,0-3.2,0-4.8c-0.16,0-0.32,0-0.48,0
    c0-1.76,0-3.52,0-5.28C81.954,157.702,81.619,155.542,81.6,152.64z"/>
</svg>

Could someone please tell me how to extract the coordinates from this XML data so I can use them with an HTML image map? I obviously have no experience with parsing XML files and I wouldn't know where to begin with preparing a script to do so.

谁能告诉我如何从这个XML数据中提取坐标，以便我可以在HTML图像映射中使用它们吗?显然，我没有解析XML文件的经验，我也不知道从哪里开始编写脚本。

Thanks in advance!

提前谢谢!

1 个解决方案

#1

Well, the first thing that you have to know about SVG is how a path is composed:

关于SVG，首先要知道的是路径是如何组成的:

The 'd' attribute contains the specifications to create the path. Each command starts with a letter, matching the following:

“d”属性包含创建路径的规范。每个命令都以字母开头，匹配以下内容:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

Your path is a little complex, because it was generated by Illustrator, anyway M81.6,152.64 is the first step, it tells the render to position the cursor there.

您的路径有点复杂，因为它是由Illustrator生成的，不管怎样，M81.6,152.64是第一步，它告诉渲染将光标放在那里。

Then it starts drawing: c7.519,0,15.041,0,22.56,0, it means "curve to", and the four numbers are the values to generate a cubic bezier curve (you can learn more here).

然后开始绘图:c7.519,0,15.041,0,22.56,0，它的意思是“曲线”，这四个数字是生成一个立方体bezier曲线的值(你可以在这里学到更多)。

There are a lot of curves in your path ('c' and four numbers), and it ends with 'z', wich means 'close the path'.

在你的路径上有很多曲线(c和4个数字)，它以z结尾，其意为“关闭路径”。

What can you do? Well, you can parse the attribute 'd' of your path tag, for example with xml javascript parser, (or just parsing the content of the file as a string and searching the content of the attribute d=""), and with this string you can get the origin point of your path.

你会做什么呢?好，您可以解析路径标记的属性'd'，例如使用xml javascript解析器(或者只是将文件的内容解析为字符串并搜索属性d="")，使用这个字符串您可以获得路径的起点。

If you want to display your path, render it with javascript in real-time, you can use raphael.js. It takes string like your attribute 'd' to create a path, as you can see here, maybe with raphael it would be easier to create an object with events associociated than HTML image map.

如果想要显示路径，可以使用javascript实时呈现路径，可以使用raphael.js。创建路径需要像属性'd'这样的字符串，正如您在这里看到的，也许使用raphael创建具有关联事件的对象要比使用HTML图像映射更容易。

If you want to extract each point of your drawing, SVG path doesn't works in that way, you can get just heights and widths of all the points from the xml. I recommend you to overlap a raphael svg path to your image.

如果您想要提取绘图的每一个点，SVG路径不能以这种方式工作，您可以从xml获得所有点的高度和宽度。我建议您将raphael svg路径与图像重叠。

#1