将SVG多边形转换为路径
我有一个相当大的行政划分SVG文件，我需要在Raphael.JS（它有600多边形和1.2 Mb的重量）工作。
现在，我需要将这些多边形转换为路径，以便它在Raphael中起作用。 伟大的poly2path工具可以做到这一点，但它不支持任何批处理命令，因此每个多边形相对于其他多边形的位置都会丢失。
你知道任何将SVG多边形转换为路径的工具吗？ （我也有用于导出SVG的AI文件）。
非常感谢
运行下面的代码：
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);
}
使用浏览器的开发工具（或Firebug），在元素上使用“复制为HTML”（或复制SVG）将修改过的源文件导入剪贴板。
粘贴到一个新的文件，并享受。
我在我的网站上有一个上述方法的演示（稍作修改）：
http://phrogz.net/svg/convert_polys_to_paths.svg
在该页面上有两种使用方法; 一个（如上所述）使用基于字符串的技术来获取和设置点; 另一个使用SVG DOM访问点和设置路径命令。
正如注释中的@Interactive所指出的那样，您可以通过以下方式通过纯文本转换完成此操作：
<polyline和<polygon转换为<path points="更改为d="M 对于任何<polygon>元素，您需要添加z作为d属性的最后一个字符，以将最后一个点连接到第一个点。 例如：
<polygon points="1,2 3,-4 5,6"/>
变
<path d="M1,2 3,-4 5,6z"/>
这个'hack'的作用是因为规范声明moveto命令（ M或m ）后跟多个坐标是合法的，在第一个解释为lineto命令之后的所有坐标都是合法的。
复制开发人员工具中的所有内容似乎相当不方便。 您可以使用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处理器（Saxon，Xalan，xsltproc，Altova ...）甚至浏览器中的XSLTProcessor对象来运行此操作，如：
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(stylesheet);
var transformedSVG = xsltProcessor.transformToFragment(svgDocument).firstChild
（类似问题：SVG中由路径与多边形绘制的多边形示例）
对多边形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);
}