Pretvori poligon u podatke o putanji - CSS-trikovi

To sam morao učiniti nekoliko puta nedavno, pa sam mislio da ću sačuvati metodu. StackOverflow ima izvrsnu metodu:

().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 napravio je olovku da to učini brzo:

Pogledajte Olovka za pretvaranje SVG poligona u put Michaela Schofielda (@michaelschofield) na CodePenu.

Stavite svoj vlastiti Poligon u SVG iznad, a zatim ga zamjenjuje staza u DOM-u. Možete pregledati DevTools da biste dobili podatke o putanji.

Svrha je, na primjer, pokušavanje animiranja iz oblika s ravnim crtama u oblik s zakrivljenim crtama. SVG softverski alati prvi će ih prikazati kao poligon, što je druga vrsta podataka koja ne može izvorno animirati sintaksu puta.