Konvertuoti daugiakampį į kelio duomenis - CSS-gudrybės

Neseniai turėjau tai padaryti keletą kartų, todėl maniau, kad išsaugosiu metodą. „StackOverflow“ turi puikų metodą:

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

Michaelas Schofieldas pagamino rašiklį, kad tai padarytų greitai:

Žr. Michaelo Schofieldo (@michaelschofield) „CodePen“ „Pen Convert SVG Polygon to Path“.

Jūs įdėsite savo daugiakampį į aukščiau esantį SVG, tada jis bus pakeistas keliu DOM. Galite patikrinti „DevTools“, kad gautumėte kelio duomenis.

Pavyzdžiui, jūs bandote animuoti nuo formos tiesiomis linijomis iki formos su išlenktomis linijomis. SVG programinės įrangos įrankiai išleis pirmąjį kaip daugiakampį, kuris yra kitokio tipo duomenys, kurie negali natūraliai atgaivinti kelio sintaksės.