Перетворити багатокутник у дані про шлях - 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); )

Майкл Шофілд зробив ручку, щоб зробити це швидко:

Дивіться Перо перетворення SVG багатокутника у шлях Майкла Шофілда (@michaelschofield) на CodePen.

Ви поміщаєте свій власний Полігон у SVG вище, а потім він замінюється шляхом у DOM. Ви можете перевірити DevTools, щоб отримати дані про шлях.

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