Μεταξύ των ετικετών σχήματος SVG, η διαδρομή είναι η πιο ισχυρή και η εκμάθηση της διαδρομής είναι αρκετή για την αντιμετώπιση κοινών προβλημάτων σχεδίασης.
Ας ρίξουμε μια ματιά στη βασική χρήση της ετικέτας μονοπατιού πρώτα:
<διαδρομή d="M100.100 L200.200 L200.400" fill="#333" stroke="#000" />
Το tag διαδρομής ορίζει τη διαδρομή μέσω της ιδιότητας d, η οποία ορίζει τις πληροφορίες που αποτελούνται από μια συμβολοσειρά, και η διαδρομή μπορεί επίσης να οριστεί από τις ιδιότητες γεμίσματος και περιγράμματος για τον καθορισμό του γεμίσματος και του περιγράμματος.
Οι πληροφορίες του χαρακτηριστικού d στην πραγματικότητα δεν είναι περίπλοκες, αποτελούνται από γράμματα και αριθμούς, οι αριθμοί αντιπροσωπεύουν σημεία συντεταγμένων και τα γράμματα είναι υπεύθυνα για την αναπαράσταση του τρόπου σύνδεσης αυτών των σημείων συντεταγμένων. Για παράδειγμα, στο παραπάνω παράδειγμα, το M αντιπροσωπεύει το σημείο εκκίνησης και το L αντιπροσωπεύει μια ευθεία σύνδεση, επομένως η πληροφορία του d μπορεί να ερμηνευτεί ως εξής:
Το M100,100 -> ξεκινά από το σημείο συντεταγμένων (100,100)
L200.200 -> Σχεδιάστε μια ευθεία γραμμή από το (100.100) έως το (200.200).
L200.400 -> Σχεδιάστε μια ευθεία γραμμή από το (200.200) έως το (200.400).
Στο χαρακτηριστικό d της ετικέτας διαδρομής, υπάρχουν συνολικά 10 εντολές που μπορούν να χρησιμοποιηθούν και οι ακόλουθες 5 εντολές είναι βασικές και σχετικά απλές.
Το M μετακινείται στις συντεταγμένες του σημείου έναρξης (moveTo) x,y
Το Z closepath συνδέει τα σημεία έναρξης και λήξης του μονοπατιού σε ευθεία γραμμή
L lineTo: Ο τρέχων κόμβος συνδέεται σε ευθεία γραμμή με τον καθορισμένο κόμβο (x,y)
H οριζόντια γραμμή x διατηρεί σταθερή τη συντεταγμένη y του τρέχοντος σημείου και ο άξονας x μετακινείται στο x, σχηματίζοντας μια οριζόντια γραμμή
V κάθετη γραμμή y διατηρεί αμετάβλητες τις συντεταγμένες x του τρέχοντος σημείου και ο άξονας y μετακινείται στο y, σχηματίζοντας μια κατακόρυφη γραμμή
Μ και Λ
Ας δούμε ένα άλλο παράδειγμα των M και L
<διαδρομή d="M30,30 L170,30 L30,170 L170,170"></path>
Από το σημείο Α (30, 30), η ευθεία γραμμή τραβιέται στο σημείο Β (170, 30), μετά ευθεία στο σημείο Γ (30, 170) και μετά ευθεία στο σημείο Δ (170, 170) και τελικά σχηματίζει μια διαδρομή σε σχήμα Ζ.
Εφέ γεμίσματος και Z
<διαδρομή d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
Υπάρχουν δύο M σε αυτήν την περιγραφή διαδρομής, επομένως σε ένα μονοπάτι, εμφανίζονται δύο σχετικά ανεξάρτητα μονοπάτια, το πρώτο μονοπάτι είναι το ίδιο με το παραπάνω παράδειγμα, το οποίο έχει σχήμα Z.
Η δεύτερη διαδρομή είναι ένα ορθογώνιο με την εντολή Z να εμφανίζεται στην περιγραφή, υποδεικνύοντας ότι συνδέει την αρχή και το τέλος της διαδρομής.
Επιπλέον, εδώ ορίζουμε την ιδιότητα ράστερ για τη διαδρομή και μπορείτε να δείτε ότι το ράστερ θα τεθεί σε ισχύ ανεξάρτητα από το αν η διαδρομή είναι κλειστή ή όχι.
H και V
Τέλος, ας ρίξουμε μια ματιά στις δύο εντολές H και V, οι οποίες είναι στην πραγματικότητα η συντομογραφία της εντολής L όταν ο άξονας x ή y παραμένει αμετάβλητος, επομένως περιγράφονται τα ακόλουθα δύο άκρα και η σχεδιασμένη εικόνα είναι η ίδια.
<διαδρομή d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
<διαδρομή d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="κίτρινο"></path>
|
Δημοσιεύτηκε στις 14/8/2017 1:15:15 μ.μ.
|
|
|
