Pārvērst daudzstūri par ceļa datiem CSS-triki

Nesen man tas bija jādara dažas reizes, tāpēc es domāju, ka saglabāju metodi. StackOverflow ir metode, kas darbojas lieliski:

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

Maikls Šofīlds izgatavoja pildspalvu, lai to izdarītu ātri:

Skatiet Michael Schofield (@michaelschofield) par CodePen Pen Convert SVG Polygon to Path.

Jūs ievietojat pats savu daudzstūri augstāk esošajā SVG, un tad tas tiek aizstāts ar ceļu DOM. DevTools varat pārbaudīt, lai iegūtu ceļa datus.

Mērķis ir, piemēram, jūs mēģināt animēt no formas ar taisnām līnijām līdz figūrai ar izliektām līnijām. SVG programmatūras rīki pirmos izvadīs kā daudzstūri, kas ir cita veida dati, kurus nevar dabiski atdzīvināt ceļa sintaksē.