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

Posted 2023-02-24

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

【英文标题】：Extracting coordinates of a path from an SVG file

【发布时间】：2012-08-20 12:46:50

【问题描述】：

我正在尝试从 Adob​​e Illustrator 中的路径中找到精确坐标以用于 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"
       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>

有人能告诉我如何从这个 XML 数据中提取坐标，以便我可以将它们与 HTML 图像地图一起使用吗？我显然没有解析 XML 文件的经验，而且我不知道从哪里开始准备脚本。

提前致谢！

【参考方案1】：

嗯，关于 SVG，你首先要了解的是路径是如何组成的：

“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

你的路径有点复杂，因为它是由Illustrator生成的，反正M81.6,152.64是第一步，它告诉渲染器将光标定位在那里。

然后开始画：c7.519,0,15.041,0,22.56,0，意思是“曲线到”，四个数字就是生成三次贝塞尔曲线的值（可以了解更多here )。

你的路径中有很多曲线（'c'和四个数字），它以'z'结尾，意思是'关闭路径'。

你能做什么？好吧，您可以解析路径标记的属性“d”，例如使用xml javascript parser，（或者只是将文件的内容解析为字符串并搜索属性d =“”的内容），然后使用这个字符串，您可以获取路径的原点。

如果你想显示你的路径，用javascript实时渲染，你可以使用raphael.js。它需要像属性“d”这样的字符串来创建路径，如您所见here，也许使用 raphael 创建具有关联事件的对象比 HTML 图像映射更容易。

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