從SVG文件中提取路徑的座標

我試圖從Adobe Illustrator中的路徑中找到pericise座標以在HTML圖像地圖中使用，並且有人建議我將路徑另存爲SVG文件，但是當我打開在記事本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文件的經驗，我不知道從哪裏開始準備腳本。

在此先感謝！

來源

2012-08-25 dcd0181

好了，你必須瞭解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

你的路徑是一個有點複雜，因爲它是由插圖產生的，反正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，也許與拉斐爾一樣，創建一個事件的關聯比HTML圖像映射更容易。

如果要提取繪圖中的每個點，SVG路徑不會以這種方式工作，只需從xml中獲取所有點的高度和寬度即可。我建議您將raphael svg路徑重疊到您的圖像上。

來源

2012-10-22 14:38:14

從SVG文件中提取路徑的座標

回答

相關問題