polygon to path

by Susan Delgado

HTML

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">


<svg version="1.1" id="Layer_1" x="0px" y="0px" width="100%" viewBox="0 0 691 424" enable-background="new 0 0 691 424" >
    <polygon fill="none" points="273.185,144.42 200.313,270.711 491.8,270.711 418.928,144.42 346.057,18.129" />
    
        <polygon fill="#EF3E2D" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10" points="200.314,270.711 491.8,270.711 
        418.929,144.421 346.057,18.13 273.185,144.421   " />
    
        <polygon fill="blue" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10" points="200.065,270.78 54.322,270.78 
        90.758,207.635 127.194,144.49 163.629,207.635 " />

        <polygon fill="red" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10" points="127.048,144.794 272.792,144.794 
        236.356,207.94 199.92,271.085 163.484,207.94 " />

       <polygon fill="white" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10" points="54.207,270.879 199.95,270.879 
        163.514,334.025 127.078,397.17 90.642,334.025   " />
    
        <polygon fill="black" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10" points="345.98,270.855 200.236,270.855 
        236.672,334.001 273.108,397.146 309.544,334.001     " />
     
        <polygon fill="purple" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10" points="492.281,270.971 346.538,270.971 
        382.974,334.116 419.41,397.261 455.846,334.116  " />
   
        <polygon fill="green" stroke="#FFFFFF" stroke-width="0.5194" stroke-miterlimit="10" points="419.432,397.241 565.175,397.241 
        528.739,334.095 492.303,270.95 455.868,334.095  " />
    
        <polygon fill="yellow" stroke="#FFFFFF" stroke-width="0.5771" stroke-miterlimit="10" points="638.085,271.11...

CSS

body {
    background:#333;
    /* background-image:url('http://lorempixel.com/1000/1000/'); */
}

JavaScript

$(function () {
    
    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);
}

});