6

我试图从 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"
     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>

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

提前致谢！

4

1 回答 1

9

好吧，关于 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，意思是“曲线到”，这四个数字是生成三次贝塞尔曲线的值（你可以在这里了解更多）。

你的路径中有很多曲线（“c”和四个数字），它以“z”结尾，这意味着“关闭路径”。

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

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

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

于 2012-10-22T14:38:14.987 回答