svg rect to path fn

svg rect to path fn

by vrluckyin India

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="838px" height="721px" version="1.1"><g transform="translate(0.5,0.5)"><rect x="239" y="0" width="320" height="80" fill="#fff2cc" stroke="#000000" pointer-events="none"/><rect x="239" y="120" width="320" height="80" fill="#a9c4eb" stroke="#000000" pointer-events="none"/><rect x="239" y="240" width="320" height="80" fill="#f8cecc" stroke="#000000" pointer-events="none"/><rect x="659" y="280" width="120" height="320" fill="#fff2cc" stroke="#000000" transform="rotate(-23,719,440)" pointer-events="none"/><rect x="49" y="290" width="120" height="320" fill="#99ffff" stroke="#000000" transform="rotate(19,109,450)" pointer-events="none"/><rect x="169" y="480" width="230" height="80" fill="#a9c4eb" stroke="#000000" pointer-events="none"/><rect x="424" y="480" width="230" height="80" fill="#a9c4eb" stroke="#000000" pointer-events="none"/><rect x="79" y="680" width="680" height="40" fill="#cc0066" stroke="#000000" pointer-events="none"/></g></svg>

JavaScript

// Code from http://stackoverflow.com/questions/10717190/convert-svg-polygon-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 = parseInt(poly.getAttribute('x'));
  var y = parseInt(poly.getAttribute('y'));
  var w = parseInt(poly.getAttribute('width'));
  var h = parseInt(poly.getAttribute('height'));
  var _x = (x+y) * -1 ;
  var pathdata = 'M'+x+' '+y+' h '+w+ ' v '+h+' h '+ _x +' Z';
   path.setAttribute('d',pathdata);
   path.setAttribute('fill','transparent');
   path.setAttribute('stroke','black');
  console.log(path);
}