Pretvori poligon v podatke o poti - CSS-triki

Anonim

V zadnjem času sem to moral nekajkrat storiti, zato sem mislil, da bom metodo shranil. StackOverflow ima odlično uporabljeno metodo:

().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 je hitro naredil pisalo:

Oglejte si Pen Convert SVG Polygon to Path avtorja Michael Schofield (@michaelschofield) na CodePen.

Zgoraj v SVG vstavite svoj Poligon, nato pa ga v DOM nadomesti pot. DevTools lahko pregledate, da dobite podatke o poti.

Namen je na primer poskušati animirati iz oblike z ravnimi črtami v obliko z ukrivljenimi črtami. Programska orodja SVG bodo prvo izdala kot poligon, ki je drugačna vrsta podatkov, ki ne morejo naravnost animirati sintakse poti.