Αυτό είναι λίγο εσωτερικό από ένα πράγμα, έπρεπε μόνο να το κάνω μόνοι μου μια φορά και το βρήκα συγκεχυμένο, έτσι σκέφτηκα ότι θα έκανα ένα ολόκληρο βίντεο σε αυτό.
Το θέμα είναι ότι δεν είναι όλα στο SVG. είναι φανταστικό γιατί μπορεί να είναι οτιδήποτε. Αλλά η σύνταξη για αυτό είναι λίγο πιο περίπλοκη από οποιοδήποτε άλλο σχήμα. Έτσι (ίσως για αυτόν τον λόγο;) Ο Illustrator εξάγει πάντα τα σχήματα στο SVG με το πιο στενό στοιχείο. Τα ορθογώνια είναι , άλλα σχήματα που αποτελούνται από μόνο ευθείες γραμμές είναι ένα , ή εάν είναι ανοιχτό σχήμα , κ.λπ.
Αυτό θα ήταν καλό, εκτός από τις μεθόδους DOM για αυτά τα σχήματα διαφέρουν. Ένα στοιχείο διαδρομής έχει μια μέθοδο που ονομάζεται getTotalLength()που σας επιτρέπει να γνωρίζετε πόσο καιρό είναι η διαδρομή. Αυτό είναι αρκετά δροσερό και μερικές φορές χρήσιμο, αλλά δεν μπορείτε να το κάνετε μόνο σε ένα άλλο στοιχείο.
Ένας λόγος για τον οποίο ίσως θέλετε να ξέρετε ότι το μήκος είναι επειδή σκοπεύετε να το κινούσετε έτσι ώστε το σχήμα να «σχεδιάζεται» - ένα δροσερό μικρό εφέ σχεδίασης (συλλογή παραδειγμάτων). Μπορείτε να το κάνετε σε CSS, αλλά είναι ωραίο να χρησιμοποιήσετε κάποια JavaScript για να εφαρμόσετε αυτό το CSS, ώστε να ζωντανεύει την τέλεια απόσταση κάθε φορά.
Ας πούμε λοιπόν ότι θέλετε να κάνετε αυτό το εφέ σχεδίασης, αλλά το σχήμα είναι έτσι ώστε η JavaScript να αποτυγχάνει. Μπορείτε να μετατρέψετε αυτό το πολύγωνο σε μια διαδρομή, χωρίς να το αλλάξετε οπτικά, προσθέτοντας απλώς ένα σημείο σε αυτό που έχει λαβή. Όπως στο, κάντε κλικ με το εργαλείο πένας και σύρετε έτσι ώστε οι λαβές να βγουν και να ευθυγραμμίσετε τις λαβές ακριβώς κατά μήκος της γραμμής που υπάρχει ήδη εκεί. Η ύπαρξη αυτού του σημείου θα το κάνει σε έξοδο.
Εάν το κάνετε πολύ, υπάρχει ένα εργαλείο που ονομάζεται Poly2Path που λειτουργεί και δεν απαιτεί αυτό το περιττό σημείο.