jQuery addClass example

Change class name on click in jQuery

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,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(' ');
  debugger
  if (poly.tagName=='polygon') pathdata+='z';
  path.setAttribute('d',pathdata);
  poly.parentNode.replaceChild(path,poly);
}