將SVG多邊形轉換爲路徑

Question

我有一個相當大的管理細分SVG文件，我需要在Raphael.JS（它有600多邊形和權重1.2 Mb）中使用。

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

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

非常感謝

Answer 1

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命令（M或m），其次是多座標是合法的，與之後的所有座標首先解釋爲lineto命令。

Answer 2

多邊形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); 
} 

Answer 3

從開發者工具複製一切似乎非常不方便。你可以使用一個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）

Answer 4

一個clicky-bunty答案：

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

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