Ας υποθέσουμε ότι έχετε μια γραμμή στο SVG:
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Μπορείτε να χρησιμοποιήσετε το stroke-dasharray ιδιοκτησία στο CSS για δημιουργία παύλων:
line {
stroke-dasharray: 5;
}Ότι 5 Η τιμή είναι μια σχετική μονάδα που βασίζεται στο μέγεθος των SVG viewBox. Θα μπορούσαμε να χρησιμοποιήσουμε οποιοδήποτε μήκος CSS, πραγματικά. Αυτό όμως που κάνει είναι να δημιουργεί ένα μοτίβο από παύλες μήκους 5 μονάδων με 5 κενά μονάδων μεταξύ τους.
Μέχρι εδώ καλά. Μπορούμε να χρησιμοποιήσουμε δύο τιμές όπου η δεύτερη τιμή καθορίζει μεμονωμένα το μήκος του κενού:
Τώρα έχουμε παύλες που είναι 5 μονάδες και κενά που είναι 10. Ας δοκιμάσουμε μια τρίτη τιμή:
Δείτε πώς σχηματίζουμε ένα μοτίβο εδώ; Πηγαίνει:
- Παύλα: 5 μονάδες
- Κενό: 10 μονάδες
- Παύλα: 15 μονάδες
Θα νομίζατε ότι επαναλαμβάνεται μετά από αυτό με τον ίδιο ακριβώς ρυθμό. Αλλά όχι! Αν γινόταν, θα είχαμε παύλες που θα χτυπούσαν η μία την άλλη:
- Παύλα: 5 μονάδες
- Κενό: 10 μονάδες
- Παύλα: 15 μονάδες
- Παύλα: 5 μονάδες
- Κενό: 10 μονάδες
- Παύλα: 15 μονάδες
- …και ούτω καθεξής.
Αντ 'αυτού, stroke-dasharray γίνεται πολύ έξυπνο και αντιγράφει το μοτίβο εάν υπάρχει περιττός αριθμός τιμών Έτσι…
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;Αυτός είναι πραγματικά ο λόγος που μια ενιαία τιμή λειτουργεί! Νωρίτερα, δηλώσαμε single 5 αξία. Αυτό είναι πραγματικά το ίδιο με το να λες stroke-dasharray: 5 5. Χωρίς τη δεύτερη τιμή, stroke-dasharray αντιγράφει σιωπηρά την πρώτη τιμή για να πάρει ένα επαναλαμβανόμενο μοτίβο. Διαφορετικά, θα ήταν απλώς μια συμπαγής γραμμή παύλες μήκους 5 μονάδων, αλλά χωρίς κενά μεταξύ τους!
Το σχέδιο εξαρτάται επίσης από το μέγεθος του ίδιου του σχήματος. Το SVG μας line είναι 500 μονάδες. Ας ρυθμίσουμε μεγαλύτερο stroke-dasharray τιμές και αθροίστε τις:
stroke-dasharray: 10 20 30 40 50; /* 150 units */Εάν το μοτίβο εκτελείται τέσσερις φορές (150 μονάδες ⨉ 4 επαναλήψεις), έχουμε να κάνουμε με 600 συνολικές μονάδες. Αυτές οι επιπλέον 100 μονάδες κόβονται για να αποφευχθεί η υπερχείλιση του μοτίβου.
Αυτό είναι όλο.
🎩 Συμβουλή για καπέλο Χορός Joshua for φωνάζοντας αυτό!
