Преобразовать многоугольник в данные пути - 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); )

Майкл Шофилд сделал ручку, чтобы делать это быстро:

См. Статью Майкла Шофилда (@michaelschofield) «Преобразование SVG-многоугольника в путь» на CodePen.

Вы помещаете свой собственный многоугольник в SVG выше, а затем он заменяется путем в DOM. Вы можете DevTools проверить, чтобы получить данные пути.

Цель состоит в том, например, что вы пытаетесь анимировать фигуру с прямыми линиями в фигуру с изогнутыми линиями. Программные инструменты SVG будут выводить первый в виде многоугольника, который представляет собой другой тип данных, который не может быть анимирован изначально в синтаксисе пути.