将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，并检查了路径特性

可能不是适当的答案（因为对于大文件，程序需要一些时间）。