Εγκεφαλικό επεισόδιο - CSS-Κόλπα

Anonim

Η stroke-dasharrayιδιότητα στο CSS προορίζεται για τη δημιουργία παύλων στο σχήμα σχήματος SVG. Όσο υψηλότερος είναι ο αριθμός, τόσο περισσότερο διάστημα ανάμεσα στις παύλες στο εγκεφαλικό επεισόδιο.

.module ( stroke-dasharray: 5; )

Θυμάμαι:

  • Αυτό θα παρακάμψει ένα χαρακτηριστικό παρουσίασης
  • Αυτό δεν θα παρακάμψει ένα ενσωματωμένο στυλ π.χ.

Αξίες

Η stroke-dasharrayιδιοκτησία μπορεί να δεχτεί οποιοδήποτε μήκος, συμπεριλαμβανομένων των τιμών χωρίς μονάδα:

  • stroke-dasharray: 2
  • stroke-dasharray: 2.5
  • stroke-dasharray: 2em
  • stroke-dasharray: 15%

Οι τιμές χωρίς μονάδα είναι πιθανότατα η πιο κοινή επιλογή, όπως συμβαίνει γενικά με τις τιμές SVG. Γίνονται μονάδες μήκους που σχετίζονται με το σύστημα συντεταγμένων που έχει δημιουργηθεί από το viewBox.

Δείτε την ιδιότητα Pen stroke-dasharray από το CSS-Tricks (@ css-tricks) στο CodePen.

Να πάρει δύσκολο με stroke-dasharray

Έχετε δει ποτέ εκείνα τα δροσερά demos όπου ένα σχήμα SVG φαίνεται να σχεδιάζεται; Αυτό είναι ένα τέχνασμα που παίρνει stroke-dasharrayένα στοιχείο και το ζωντανεύει σε συνδυασμό με την stroke-dashoffsetιδιότητα.

.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )

Δείτε το Βασικό παράδειγμα του Σχεδίαση γραμμής SVG, προς τα πίσω και προς τα εμπρός από τον Chris Coyier (@chriscoyier) στο CodePen

Καλύπτουμε αυτήν την τεχνική με πολύ περισσότερες λεπτομέρειες σε αυτήν την ανάρτηση. Φαίνεται ότι το IE 11 και κάτω δεν του αρέσει να ζωντανεύει τις ιδιότητες εγκεφαλικού επεισοδίου με @keyframes, οπότε προσέξτε εκεί

Σχετιζομαι με

  • stroke
  • stroke-dashoffset
  • stroke-linecap
  • stroke-width

Περισσότερες πληροφορίες

  • SVG 1.1 Προδιαγραφές
  • MDN για γεμίσματα και εγκεφαλικά επεισόδια

Υποστήριξη προγράμματος περιήγησης

Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ ΙΕ Android iOS
Ναί Ναί Ναί Ναί 9+ 4.4+ Ναί