Αυτή η ιδιότητα ορίζει μια διαδρομή.
χρήση
Χαρακτηριστικά ορισμού διαδρομής κατηγορίας
τιμή
Μεταβλητότητα Ναι
Τεκμηρίωση προδιαγραφών SVG 1.1 (2η έκδοση)
Η ιδιότητα d είναι στην πραγματικότητα μια συμβολοσειρά που περιέχει μια σειρά από περιγραφές διαδρομής. Αυτές οι διαδρομές αποτελούνται από τις ακόλουθες οδηγίες:
- Μετακίνηση σε
- Λινέτο
- Καμπύλη
- Άρκτο
- ΚλείσιμοΜονοπάτι
Αυτά συνδυάζονται σε μια συμβολοσειρά. Αυτές οι διαφορετικές εντολές κάνουν διάκριση πεζών-κεφαλαίων. Μια εντολή με κεφαλαία γράμματα υποδεικνύει ότι οι παράμετροί της είναι απόλυτες θέσεις, ενώ οι πεζές εντολές υποδεικνύουν ένα σημείο σε σχέση με την τρέχουσα θέση. Μια αρνητική τιμή μπορεί να καθοριστεί ως παράμετρος για την εντολή: η αρνητική γωνία θα είναι αριστερόστροφη και οι απόλυτες θέσεις x και y θα θεωρούνται αρνητικές συντεταγμένες. Η αρνητική σχετική τιμή x θα μετακινηθεί προς τα αριστερά, ενώ η αρνητική σχετική τιμή y θα μετακινηθεί προς τα πάνω.
Μετακίνηση σε
Η εντολή Moveto μπορεί να θεωρηθεί ως το να σηκώνεις ένα στυλό σχεδίασης και να προσγειώνεσαι σε άλλο μέρος. Δεν υπάρχει τμήμα γραμμής μεταξύ του προηγούμενου σημείου και αυτού του καθορισμένου σημείου. Είναι καλή ιδέα να ξεκινήσετε μια διαδρομή με μια εντολή Moveto, γιατί χωρίς ένα αρχικοποιημένο Moveto, το σημείο εκκίνησης θα είναι το σημείο όπου συνέβη η προηγούμενη λειτουργία, η οποία μπορεί να οδηγήσει σε απροσδιόριστη συμπεριφορά.
Σύνταξη:
M x,y εδώ x και y είναι απόλυτες συντεταγμένες, που αντιπροσωπεύουν οριζόντιες και κάθετες συντεταγμένες αντίστοιχα.
m dx, dy εδώ dx και dy είναι οι αποστάσεις σε σχέση με το τρέχον σημείο, δεξιά και κάτω, αντίστοιχα.
Παράδειγμα:
Στην απόλυτη θέση x=50, y= 100:<path d="M50.100..." />
Μετακίνηση 50 προς τα δεξιά, 100 προς τα κάτω: <path d="m50.100..." />
Λινέτο
Σε αντίθεση με την εντολή Moveto, η εντολή Lineto θα σχεδιάσει ένα ευθύγραμμο τμήμα. Αυτό το ευθύγραμμο τμήμα μετακινείται από την τρέχουσα θέση στην καθορισμένη θέση. Η σύνταξη της εγγενούς εντολής Lineto είναι "L x, y" ή "l dx, dy", όπου x και y είναι απόλυτες συντεταγμένες και dx και dy είναι οι αποστάσεις δεξιά και κάτω, αντίστοιχα. Υπάρχουν επίσης τα γράμματα H και V, τα οποία καθορίζουν οριζόντιες και κάθετες κινήσεις, αντίστοιχα. Έχουν την ίδια σύνταξη με το L και η πεζή εκδοχή τους είναι σχετική απόσταση και η κεφαλαία έκδοση είναι απόλυτη θέση.
Καμπύλη
Η εντολή Curvto καθορίζει μια καμπύλη Bézier. Υπάρχουν δύο τύποι καμπυλών Bézier: κυβικές και τετραγωνικές. Μια τετραγωνική καμπύλη Bézier είναι μια ειδική κυβική καμπύλη Bézier όπου τα δύο άκρα του σημείου ελέγχου είναι τα ίδια. Η σύνταξη μιας τετραγωνικής καμπύλης Bézier είναι "Q cx, cy x, y" ή "q dcx, dcy dx, dy". Τα Cx και Cy είναι και οι δύο απόλυτες συντεταγμένες των σημείων ελέγχου, ενώ τα DCX και DCY είναι οι αποστάσεις των σημείων ελέγχου στις κατευθύνσεις X και Y, αντίστοιχα.
Η κυβική καμπύλη Bézier ακολουθεί την ίδια ιδέα με την τετραγωνική καμπύλη Bézier, αλλά πρέπει να λάβει υπόψη δύο σημεία ελέγχου. Η σύνταξη της κυβικής καμπύλης Bézier είναι: "C c1x, c1y c2x, c2y x, y" ή "c dc1x, dc1y dc2x, dc2y dx, dy", όπου c1x, c1y και c2x, c2y είναι οι απόλυτες συντεταγμένες των σημείων ελέγχου των σημείων έναρξης και λήξης, αντίστοιχα. Τα DC1X, DC1Y και DC2X, DC2Y σχετίζονται με το σημείο εκκίνησης και όχι με το τελικό σημείο. dx και dy είναι οι αποστάσεις προς τα δεξιά και προς τα κάτω, αντίστοιχα.
Για να συνδέσετε ομαλές καμπύλες Bézier, μπορείτε επίσης να χρησιμοποιήσετε τις εντολές T και S. Η σύνταξή τους είναι απλούστερη από άλλες εντολές Curveto επειδή υποθέτει ότι το πρώτο σημείο ελέγχου είναι μια αντανάκλαση του προηγούμενου σημείου ελέγχου στο προηγούμενο ή ότι είναι στην πραγματικότητα το προηγούμενο σημείο εάν δεν υπάρχει προηγούμενο σημείο ελέγχου. Η σύνταξη του T είναι "T x,y" ή "t dx,dy", που αντιστοιχεί σε απόλυτες συντεταγμένες και σχετικές αποστάσεις αντίστοιχα, και χρησιμοποιείται για τη δημιουργία μιας τετραγωνικής καμπύλης Bézier. Το S χρησιμοποιείται για τη δημιουργία μιας κυβικής καμπύλης Bézier, η σύνταξη είναι "S cx, cy x, y" ή "s dcx, dcy dx, dy", όπου το (d)cx καθορίζει το δεύτερο σημείο ελέγχου.
Τέλος, όλες οι εντολές καμπύλης Bézier μπορούν να δημιουργήσουν ένα γράφημα Bézier πολλαπλών όψεων, να αρχικοποιήσουν πρώτα την εντολή και, στη συνέχεια, να καθορίσουν όλες τις παραμέτρους πολλές φορές για να δημιουργήσουν ένα γράφημα Bézier πολλαπλών όψεων. Επομένως, οι ακόλουθες δύο εντολές μπορούν να δημιουργήσουν την ίδια ακριβώς διαδρομή:
Άρκτο
Μερικές φορές είναι απλούστερο να περιγράψουμε μια διαδρομή καμπύλης ελλειπτικού τόξου παρά μια διαδρομή καμπύλης Bézier. Στο τέλος της ημέρας, το στοιχείο διαδρομής υποστηρίζει την εντολή Arcto. Το κέντρο του τόξου υπολογίζεται από άλλες μεταβλητές. Μια δήλωση arcto είναι σχετικά λίγο επανάληψη του Visual Studio: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Αποδομώντας το, rx και ry είναι οι ακτίνες στις κατευθύνσεις x και y, αντίστοιχα, και η τιμή του LargeArcFlag είναι 0 ή 1 για να καθοριστεί εάν θα σχεδιαστεί ένα μικρό τόξο (0) ή ένα μεγάλο τόξο (1). Το SweepFlag είναι επίσης είτε 0 είτε 1, το οποίο χρησιμοποιείται για να προσδιορίσει εάν το τόξο είναι δεξιόστροφα (1) ή αριστερόστροφα (0). x και y είναι οι συντεταγμένες του προορισμού. Αν και το xAxisRotate υποστηρίζει την αλλαγή του προσανατολισμού του άξονα x σε σχέση με το τρέχον πλαίσιο αναφοράς, αυτή η παράμετρος δεν φαίνεται να έχει μεγάλη επίδραση στο Gecko 7.
ΚλείσιμοΜονοπάτι
Η εντολή ClosePath θα σχεδιάσει απλώς μια ευθεία γραμμή από το τρέχον σημείο στο πρώτο σημείο της τρέχουσας διαδρομής. Είναι η απλούστερη εντολή και δεν συνοδεύεται από παραμέτρους. Ακολουθεί τη συντομότερη γραμμική διαδρομή προς το σημείο εκκίνησης και εάν άλλες διαδρομές πέφτουν σε αυτήν τη διαδρομή, οι πιθανές διαδρομές τέμνονται. Η σύνταξη είναι "Z" ή "z" και και οι δύο μέθοδοι γραφής έχουν την ίδια λειτουργία.
στοιχείο
Τα ακόλουθα στοιχεία μπορούν να χρησιμοποιήσουν το χαρακτηριστικό d:
Οι ίδιοι κανόνες μπορούν να εφαρμοστούν <animate>σε διαδρομές κίνησης.
Υπενθύμιση
Η αρχή (σύστημα συντεταγμένων 0,0 σημεία) είναι συχνά η επάνω αριστερή γωνία του πλαισίου. Ωστόσο<glyph>, η προέλευση του στοιχείου βρίσκεται στην κάτω αριστερή γωνία του γραμματοκιβωτίου του.
Ένα κόμμα επιτρέπεται μεταξύ οποιωνδήποτε δύο αριθμών, αλλά όχι οπουδήποτε αλλού.
παράδειγμα
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="νέο 0 0 50 50" xml:space="διατήρηση">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Για να δείξουμε τι σημαίνει στην πραγματικότητα το d="M37,17v15H14V17H37z M50,0H0v50h50V0z", ας συζητήσουμε κάθε εδάφιο αυτής της συμβολοσειράς.
d=" M37,17 || v15 || Η14 || V17 || Η37 || z // M50,0 || Η0 || v50 || η50 || V0 || z"
δ=
Αυτή η ιδιότητα περιέχει τις συμβολοσειρές που αποτελούν ολόκληρο το SVG.
Μ37,17
Το M είναι η συντομογραφία του MoveTo. Το κεφαλαίο "M" σημαίνει απόλυτες συντεταγμένες και το πεζό "m" σημαίνει σχετική απόσταση. Υπονοεί ότι βασίζεται στις συντεταγμένες έναρξης, η γραμμή βρίσκεται μέσα στο πλαίσιο και ξεκινάτε από την επάνω δεξιά γωνία του ορθογωνίου μέσα στο πλαίσιο.
Το 37 είναι η συντομογραφία για την αρχική θέση svg, στα 37 εικονοστοιχεία στον άξονα Χ.
17 Ξεκινήστε τη θέση svg, στα 17 pixel στον άξονα y.
v15
Το V σημαίνει κάθετο. Το κεφαλαίο V δείχνει απόλυτες συντεταγμένες και το πεζό V δείχνει το σχετικό μήκος και απόσταση. Τα dx/dy και x/y μπορούν να χρησιμοποιηθούν στις αντίστοιχες θέσεις H/V και h/v.
Εδώ αναπαρίσταται σχεδιάζοντας μια κάθετη γραμμή 15 pixel σε σχέση με μια δεδομένη συντεταγμένη. Σημαίνει ότι σχεδιάζετε 15 pixel προς τα κάτω στις συντεταγμένες 37,32.
Η14
Το H σημαίνει επίπεδο, το οποίο είναι απόλυτες συντεταγμένες επειδή γράφεται με κεφαλαία.
Από το τέλος του v15, σχεδιάστε μια οριζόντια γραμμή μέχρι να επιτευχθεί η απόλυτη συντεταγμένη 14 και τερματίστε το γραμμικό σχέδιο όταν φτάσει στη συντεταγμένη x 14. Οι πινελιές βρίσκονται στις συντεταγμένες 14,32.
Β17
Όπως και πριν, ξεκινήστε από το τέλος της προηγούμενης γραμμής και σχεδιάστε μια κάθετη γραμμή μέχρι να φτάσετε στη συντεταγμένη 17 του άξονα y. Οι πινελιές βρίσκονται στις συντεταγμένες 14,17.
Η37
Τέλος, ξεκινώντας από το 14,17, σχεδιάστε μια οριζόντια γραμμή μέχρι να φτάσετε στη συντεταγμένη 37 του άξονα x. Η διαδρομή βρίσκεται στις συντεταγμένες 37,17 (τιμή M)
z
Τόσο τα πεζά όσο και τα κεφαλαία Z κλείνουν μια σειρά από τμήματα SVG.
,
Ένα κόμμα ξεκινά την επόμενη συμβολοσειρά απλών διανυσματικών γραφικών τμημάτων. Η επόμενη σειρά απλών τμημάτων διανυσματικής γραμμής θα κάνει το εξωτερικό πλαίσιο.
Μ50,0
Ξεκινήστε από τον άξονα x 50 και τον άξονα y 0.
Η0
Σχεδιάστε μια ευθεία γραμμή μέχρι το (0,0).
v50
Σχεδιάστε μια κάθετη γραμμή 0,0 pixel σε σχέση με 50. Αυτή η γραμμή θα τραβηχτεί στο (0,50).
Η50
Σχεδιάστε μια οριζόντια γραμμή 50 pixel σε σχέση με το (0,-50). Αυτή η γραμμή θα τραβηχτεί προς τα δεξιά στο (50,50).
V0
Σχεδιάστε μια κάθετη γραμμή μέχρι να φτάσετε στην συντεταγμένη 0 του άξονα y. Αυτό θα τραβήξει μια γραμμή στο (50,0), που είναι η τιμή του M.
z
Τόσο τα πεζά όσο και τα κεφαλαία Z κλείνουν μια σειρά από τμήματα SVG.
Επισυνάψτε τον κωδικό:
Τέλος, επισυνάπτεται ο σύνδεσμος προς το έγγραφο: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Δημοσιεύτηκε στις 4/5/2018 11:29:47 π.μ.
|
|
|
|
