Η stroke-dashoffsetιδιότητα στο CSS καθορίζει την τοποθεσία κατά μήκος μιας διαδρομής SVG όπου strokeθα ξεκινήσει η παύλα του α . Όσο υψηλότερος είναι ο αριθμός, τόσο περισσότερο κατά μήκος της διαδρομής θα ξεκινήσουν οι παύλες.
.module ( stroke-dashoffset: 100; )Θυμάμαι:
- Αυτό θα παρακάμψει ένα χαρακτηριστικό παρουσίασης
- Αυτό δεν θα παρακάμψει ένα ενσωματωμένο στυλ π.χ.
Αξίες
Η stroke-dashoffsetιδιότητα μπορεί να αποδεχτεί ένα ποσοστό ή μια αριθμητική τιμή.
stroke-dashoffset: 100stroke-dashoffset: 25%
Σημειώστε ότι δεν απαιτούνται μονάδες (δηλ. emΚαι px). Ένας αριθμός χωρίς μονάδες αποδίδεται σε μονάδες pixel. Το ποσοστό σχετίζεται με το ποσοστό της τρέχουσας θύρας προβολής.
Δείτε την ιδιότητα Pen stroke-dashoffset από το CSS-Tricks (@ css-tricks) στο CodePen.
Να πάρει δύσκολο με stroke-dashoffset
Έχετε δει ποτέ εκείνα τα δροσερά demos όπου ένα σχήμα SVG φαίνεται να σχεδιάζεται; Αυτό είναι ένα τέχνασμα που ζωντανεύει stroke-dashoffsetένα στοιχείο σε συνδυασμό με την stroke-dasharrayιδιότητα.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Δείτε το Βασικό παράδειγμα του Σχεδίαση γραμμής SVG, προς τα πίσω και προς τα εμπρός από τον Chris Coyier (@chriscoyier) στο CodePen
Καλύπτουμε αυτήν την τεχνική με πολύ περισσότερες λεπτομέρειες σε αυτήν την ανάρτηση.
Σχετιζομαι με
strokestroke-dasharraystroke-linecapstroke-width
Περισσότερες πληροφορίες
- SVG 1.1 Προδιαγραφές
- MDN για γεμίσματα και εγκεφαλικά επεισόδια
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| Ναί | Ναί | Ναί | Ναί | 9+ | 4.4+ | Ναί |