Преобразуване на многоъгълник в данни за пътя - CSS-трикове

Наскоро трябваше да направя това няколко пъти, така че реших да запазя метода. StackOverflow има метод, който работи чудесно:

().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); )

Майкъл Шофийлд направи писалка, за да го направи бързо:

Вижте Pen Convert SVG Polygon to Path от Michael Schofield (@michaelschofield) на CodePen.

Поставяте свой собствен Полигон в SVG по-горе и след това той се заменя с път в DOM. Можете да проверите DevTools, за да изведете данните за пътя.

Целта е например, че се опитвате да анимирате от форма с прави линии до форма с извити линии. Софтуерните инструменти на SVG ще изведат първия като многоъгълник, което е различен тип данни, които не могат да анимират естествено към синтаксиса на пътя.