将SVG多边形转换为路径

Question

我有一个相当大的行政细分SVG文件,我需要在Raphael.JS中使用它(它有600个多边形,权重1.2 Mb).

现在,我需要将这些多边形转换为路径,以便它在Raphael中工作.伟大的poly2path工具可以做到这一点,但它不支持任何批处理命令,因此每个多边形相对于其他多边形的位置都会丢失.

您知道任何将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. 使用浏览器的开发人员工具(或Firebug),在元素上使用"复制为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"/> 
   

这种'hack'是有效的,因为规范声明一个moveto命令(M或m)后跟多个坐标是合法的,所有坐标在第一个被解释为lineto命令之后.

Answer 2

一个点击式的答案：

1. 在 inkscape 矢量图形编辑器中打开 svg
2. 选择所有对象（ctrl-a）
3. 在下拉菜单点“路径”中选择第一个条目“对象到路径”（shift-ctrl-c）
4. 保存 svg 并检查路径属性

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