Μετατροπή πολυγώνου σε δεδομένα διαδρομής - 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); )

Ο Michael Schofield έκανε ένα στυλό για να το κάνει γρήγορα:

Δείτε το Pen Convert SVG Polygon to Path του Michael Schofield (@michaelschofield) στο CodePen.

Βάζετε το δικό σας πολύγωνο στο SVG παραπάνω και στη συνέχεια αντικαθίσταται από μια διαδρομή στο DOM. Μπορείτε να επιθεωρήσετε τα DevTools για να λάβετε τα δεδομένα διαδρομής.

Ο σκοπός είναι, για παράδειγμα, να προσπαθείτε να κάνετε κινούμενη εικόνα από ένα σχήμα με ευθείες γραμμές σε ένα σχήμα με καμπύλες γραμμές. Τα εργαλεία λογισμικού SVG θα παράγουν το πρώτο ως πολύγωνο, το οποίο είναι ένας διαφορετικός τύπος δεδομένων που δεν μπορούν να κινούνται εγγενώς στη σύνταξη της διαδρομής.