Skip to content

Instantly share code, notes, and snippets.

@ximik777
Last active November 5, 2015 00:55
Show Gist options
  • Save ximik777/6a7d32af01566ac1c4b5 to your computer and use it in GitHub Desktop.
Save ximik777/6a7d32af01566ac1c4b5 to your computer and use it in GitHub Desktop.
//http://stackoverflow.com/questions/10717190/convert-svg-polygon-to-path
//Open your SVG in a web browser.
//Run this code:
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('d',pathdata);
poly.parentNode.replaceChild(path,poly);
}
//Using the Developer Tools (or Firebug) of the browser, use "Copy as HTML" (or Copy SVG) on the element to get the modified source onto the clipboard.
//Paste into a new file and enjoy.
// rect to path
var polys = document.querySelectorAll('rect');
[].forEach.call(polys,convertPolyToPath);
function convertPolyToPath(poly){
var svgNS = poly.ownerSVGElement.namespaceURI;
var path = document.createElementNS(svgNS,'path');
var x = poly.getAttribute('x');
var y = poly.getAttribute('y');
var w = poly.getAttribute('width');
var h = poly.getAttribute('height');
var pathdata = 'M'+x+','+y+' h'+w +'v'+h+' h'+ (-1 * w) +' z';
path.setAttribute('d',pathdata);
poly.parentNode.replaceChild(path,poly);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment