Μάθαμε ότι ένας περιορισμός της χρήσης για να εισαγάγετε λίγο SVG είναι ότι δεν μπορείτε να γράψετε σύνθετους επιλογείς CSS που επηρεάζουν εκεί. Για παράδειγμα:
Αυτό το όριο σκιάς DOM εμποδίζει τους επιλογείς όπως
/* nope */ .parent .child ( )από την εργασία. Ίσως κάποια μέρα θα έχουμε έναν λειτουργικό CSS επιλογέα για να διεισδύσουμε σε αυτό το όριο DOM, αλλά από αυτό το γράψιμο δεν είναι ακόμα εδώ.
Μπορείτε ακόμα να ρυθμίσετε το γέμισμα στον γονέα και αυτό θα πέσει κάτω, αλλά αυτό θα σας δώσει μόνο ένα χρώμα (θυμηθείτε να μην ορίσετε το fillχαρακτηριστικό παρουσίασης σε αυτά τα σχήματα!).
Ο Fabrice Weinberg σκέφτηκε μια τακτοποιημένη μικρή τεχνική για να πάρει δύο χρώματα όμως, εκμεταλλευόμενη τη currentColorλέξη-κλειδί στο CSS.
Ορίστε την ιδιότητα CSS πλήρωσης σε οποιαδήποτε σχήματα θέλετε στο currentColor:
.shape-1, .shape-2 ( fill: currentColor; )Με αυτόν τον τρόπο, όταν ορίζετε την ιδιότητα χρώματος στον γονέα , αυτό θα περάσει επίσης. Δεν θα κάνει τίποτα από μόνο του (εκτός αν έχετε εκεί), αλλά currentColorβασίζεται σε colorαυτό, ώστε να μπορείτε να το χρησιμοποιήσετε για άλλα πράγματα.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Διαδήλωση:
Δείτε το λογότυπο Pen CodePen ως Inline SVG από τον Chris Coyier (@chriscoyier) στο CodePen.