Convert Polygon to Path Data

0
0

 

JS

I’ve had to do this a few times recently so I thought I’d save the method. StackOverflow has a method that works great:

[].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('id',poly.getAttribute('id'));
  path.setAttribute('fill',poly.getAttribute('fill'));
  path.setAttribute('stroke',poly.getAttribute('stroke'));
  path.setAttribute('d',pathdata);

  poly.parentNode.replaceChild(path,poly);
}

Michael Schofield made a Pen to do it quick:

HTML

 

<svg class=”elephant”>
<g transform=”scale(3)”>
<polygon fill=”#000000″ points=”25.693,17.699 8.763,26.584 0.598,56.484 9.003,76.657 11.764,75.815 11.404,74.615 4.68,56.724 13.686,49.999 14.886,47.598 14.886,51.44 20.53,47.358 23.412,49.579 30.211,82.301 37.537,82.301 41.423,58.404 68.438,62.968 74.084,63.089 81.289,82.301 91.974,82.301 87.892,61.647 94.977,40.513 97.761,57.646 97.321,60.208 98.274,65.746 99.402,59.967 98.24,57.566 96.297,39.313 81.169,23.342 33.4,23.305 32.36,24.025 30.497,22.262″></polygon>
</g>
</svg>

You put your own Polygon in the SVG above and then it gets replaced by a path in the DOM. You can DevTools inspect to get out the path data.

The purpose is, for example, you’re trying to animate from a shape with straight lines to a shape with curved lines. SVG software tools will output the former as a polygon, which is a different type of data that can’t animate natively to the path syntax.

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.