2012-05-23 156 views
20

我有一個相當大的管理細分SVG文件,我需要在Raphael.JS(它有600多邊形和權重1.2 Mb)中使用。將SVG多邊形轉換爲路徑

現在,我需要將這些多邊形轉換爲路徑,以便它在Raphael中工作。偉大的poly2path tool這樣做,但它不支持任何批處理命令,以便每個多邊形相對於其他多邊形的位置丟失。

你知道任何將SVG多邊形轉換爲路徑的工具嗎? (我也有用於導出SVG的AI文件)。

非常感謝

+2

如果您再次訪問@nkb,請接受您的首選答案。 – halfer

回答

64
  1. 打開在Web瀏覽器的SVG。
  2. 運行這段代碼:

    var polys = document.querySelectorAll('polygon,polyline'); 
    [].forEach.call(polys,convertPolyToPath); 
    
    function convertPolyToPath(poly){ 
        var svgNS = poly.ownerSVGElement.namespaceURI; 
        var path = document.createElementNS(svgNS,'path'); 
        var pathdata = 'M '+poly.getAttribute('points'); 
        if (poly.tagName=='polygon') pathdata+='z'; 
        path.setAttribute('d',pathdata); 
        poly.parentNode.replaceChild(path,poly); 
    } 
    
  3. 使用開發工具(或螢火蟲)的瀏覽器,使用「複製爲HTML」(或複製SVG)的元素,以獲得修改後的源到剪貼板。

  4. 粘貼到一個新的文件,並享受。

我上面的方法(稍作修改)在我的網站的演示:
http://phrogz.net/svg/convert_polys_to_paths.svg

有在頁面上使用兩種方法:一個(如上所述)使用基於字符串的技術來獲取和設置點;另一個使用SVG DOM訪問點和設置路徑命令。


正如@Interactive在評論中指出,可以通過純文本轉換的做到這一點:

  1. 轉換所有<polyline<polygon<path
  2. 更改所有points="d="M
  3. 對於任何爲<polygon>的元素,您需要添加z作爲d屬性的最後一個字符,以將最後一個點連接到第一個點。例如:

    <polygon points="1,2 3,-4 5,6"/> 
    

    成爲

    <path d="M1,2 3,-4 5,6z"/> 
    

這種 '黑客' 的作品,因爲specifications declare一個moveto命令(Mm),其次是多座標是合法的,與之後的所有座標首先解釋爲lineto命令。

+0

輝煌..謝謝 –

+0

這對於所有瀏覽器(甚至IE7-8)中的Raphael都很有效 - 但不是在IE9中。拉斐爾根本不會根據這個函數繪製路徑。你有什麼想法,爲什麼? – oyatek

+0

@oyatek問這個問題,SVG標記和repro的情況。 – Phrogz

3

多邊形ID小的修復,填充和筆觸屬性保存

var polys = document.querySelectorAll('polygon,polyline'); 
[].forEach.call(polys,convertPolyToPath); 

function convertPolyToPath(poly){ 
    var svgNS = poly.ownerSVGElement.namespaceURI; 
    var path = document.createElementNS(svgNS,'path'); 
    var points = poly.getAttribute('points').split(/\s+|,/); 
    var x0=points.shift(), y0=points.shift(); 
    var pathdata = 'M'+x0+','+y0+'L'+points.join(' '); 
    if (poly.tagName=='polygon') pathdata+='z'; 
    path.setAttribute('id',poly.getAttribute('id')); 
    path.setAttribute('fill',poly.getAttribute('fill')); 
    path.setAttribute('stroke',poly.getAttribute('stroke')); 
    path.setAttribute('d',pathdata); 

    poly.parentNode.replaceChild(path,poly); 
} 
+3

還有更多可能感興趣的屬性,比如class,style,transform,clip-path,color,onclick,display,fill-rule,opacity等等 –

4

從開發者工具複製一切似乎非常不方便。你可以使用一個XSLT爲多邊形和折線變換到路徑:

<?xml version="1.0" encoding="UTF-8"?> 
<xsl:stylesheet version="1.0" exclude-result-prefixes="svg" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:svg="http://www.w3.org/2000/svg"> 

    <!-- Identity transform: Copy everything 
     (except for polygon/polyline, handled below) --> 
    <xsl:template match="@*|node()"> 
    <xsl:copy> 
     <xsl:apply-templates select="@*|node()"/> 
    </xsl:copy> 
    </xsl:template> 

    <!-- Turn polygons/polylines into paths, 
     copy all attributes and content 
     (except for @points: Will be matched 
     by template below) --> 
    <xsl:template match="svg:polygon|svg:polyline"> 
    <path> 
     <xsl:apply-templates select="@*|node()"/> 
    </path> 
    </xsl:template> 

    <!-- Turn the points attribute into a d attribute --> 
    <xsl:template match="@points"> 
    <xsl:attribute name="d"> 
     <xsl:value-of select="concat('M',.)"/> 
     <!-- If we have a polygon, we need to make 
      this a closed path by appending "z" --> 
     <xsl:if test="parent::svg:polygon"> 
     <xsl:value-of select="'z'"/> 
     </xsl:if> 
    </xsl:attribute> 
    </xsl:template> 
</xsl:stylesheet> 

的多邊形/折線元件的任何屬性將被攜帶到路徑元素。這也適用於批處理。你可以運行該使用任何XSLT處理器(撒克遜人,的Xalan,xsltproc的,Altova的...),甚至在瀏覽器中,使用XSLTProcessor對象,如:

var xsltProcessor = new XSLTProcessor(); 
xsltProcessor.importStylesheet(stylesheet); 
var transformedSVG = xsltProcessor.transformToFragment(svgDocument).firstChild 

(類似的問題:Examples of polygons drawn by path vs polygon in SVG

3

一個clicky-bunty答案:

  1. 在Inkscape中的矢量圖形編輯器中打開SVG
  2. 選擇所有對象(按Ctrl-A)
  3. 在下拉菜單項「路徑」中選擇第一條目「對象到路徑」(移位CTRL-C)
  4. 保存SVG,並檢查了路徑特性

可能不是適當的答案(因爲對於大文件,程序需要一些時間)。