Γεμίστε - CSS-Κόλπα

Anonim

Η fillιδιότητα στο CSS προορίζεται για τη συμπλήρωση του χρώματος ενός σχήματος SVG.

.eyeball ( fill: red; )

Θυμάμαι:

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

Αξίες

Η fillιδιοκτησία μπορεί να αποδεχτεί οποιαδήποτε τιμή χρώματος CSS.

  • Ονομαστικά χρώματα - orange
  • Hex χρώματα - #FF9E2C
  • Χρώματα RGB και RGBa - rgb(255, 158, 44)καιrgba(255, 158, 44, .5)
  • Χρώματα HSL και HSLa - hsl(32, 100%, 59%)καιhsla(32, 100%, 59%, .5)

Ως μπόνους, fillαποδέχεται επίσης τα μοτίβα των σχημάτων SVG που ορίζονται μέσα σε ένα defsστοιχείο:

.module ( fill: url(#pattern); )

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

Μια θήκη χρήσης

Μια συνήθης περίπτωση χρήσης fillείναι η αλλαγή του χρώματος ενός SVG στο hover, όπως συμβαίνει colorόταν κάνουμε το στυλ του συνδέσμου.

.icon ( fill: black; ) .icon:hover ( fill: orange; )

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

Άλλη περίπτωση χρήσης

Η fillιδιότητα είναι ένας από τους πολλούς λόγους που το SVG είναι μια πολύ πιο ευέλικτη επιλογή από τα τυπικά αρχεία εικόνας. Ας πάρουμε για παράδειγμα εικονίδια.

Μπορεί να έχουμε το ίδιο σύνολο εικονιδίων αλλά σε δύο διαφορετικούς συνδυασμούς χρωμάτων. Τυπικά αρχεία εικόνας (όπως JPG.webp, PNG και GIF) θα απαιτούσαν από εμάς να δημιουργήσουμε δύο εκδόσεις κάθε εικονιδίου - μία για κάθε συνδυασμό χρωμάτων.

Το SVG, από την άλλη πλευρά, μας επιτρέπει να βάψουμε τα εικονίδια χρησιμοποιώντας την fillιδιότητα CSS :

.icon ( fill: black; ) .icon-secondary ( fill: orange; )

Τώρα μπορούμε να επαναπροσδιορίσουμε το ίδιο αρχείο SVG για πολλαπλά σενάρια αλλάζοντας το όνομα κλάσης της διαδρομής ή του σχήματος:

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

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

  • SVG 1.1 Προδιαγραφές
  • MDN για γεμίσματα και εγκεφαλικά επεισόδια
  • Cascading SVG Fill Χρώμα
  • SVG Fill Patterns από τον Jacob Jenkov

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

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