Το Inline SVG μπορεί να "στιλιστεί" με την έννοια ότι έχει ήδη γεμίσματα και εγκεφαλικά επεισόδια και όχι το δεύτερο που το βάζετε στη σελίδα. Αυτός είναι φοβερός και ένας εντελώς καλός τρόπος για να χρησιμοποιήσετε το ενσωματωμένο SVG. Αλλά μπορείτε επίσης να δημιουργήσετε στυλ ενσωματωμένο SVG μέσω CSS, το οποίο είναι κάπως φοβερό γιατί, φαντάζομαι για πολλούς από εμάς, το CSS είναι όπου αισθανόμαστε ισχυροί και άνετοι.
Λειτουργεί σχεδόν όπως θα περίμενε κανείς. Εδώ είναι ένα απλό παράδειγμα:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )Το CSS έχει λίγο «περισσότερη δύναμη», θα μπορούσατε να πείτε, από τα χαρακτηριστικά στυλ στα ίδια τα στοιχεία SVG. Αν το είχε fill="red"αυτό, το CSS θα εξακολουθούσε να "κερδίζει". Ίσως να σκεφτείτε το αντίθετο επειδή φαίνεται ότι τα χαρακτηριστικά στυλ θα είναι ισχυρά όπως τα ενσωματωμένα στυλ, αλλά δεν είναι. Ωστόσο, τα ενσωματωμένα στυλ είναι ακόμα ισχυρά.
Ομοίως, οι κανόνες CSS δεν καταρρέουν εάν υπάρχει κάτι πιο συγκεκριμένο που συμβαίνει. Για παράδειγμα:
.parent ( fill: red; )Το CSS χάνει σε αυτήν την περίπτωση, επειδή το μπλε εφαρμόζεται πιο συγκεκριμένα στο ορθό.
Εάν σκοπεύω να σχεδιάσω το στυλ SVG μέσω CSS, θεωρώ γενικά ευκολότερο να αφήσω τα χαρακτηριστικά στυλ από τα στοιχεία SVG εντελώς.
Σημαντικό πράγμα που πρέπει να γνωρίζετε!
Έχουμε περάσει χρόνο για να μιλήσουμε . Ας πούμε ότι αυτή είναι η κατάσταση:
Τελικά, αυτό το «παιδί» μπαίνει σε αυτόν τον «γονέα», σωστά; Σωστά. Λοιπόν αυτό πρέπει να λειτουργήσει;
.parent .child ( fill: red; )Όχι όμως.
Με αυτόν τον τρόπο λειτουργεί, το κλωνοποιεί και το βάζει σε ένα "Shadow DOM" σε αυτό το δεύτερο SVG. Δεν μπορείτε να διαπεράσετε αυτό το σκιά DOM με έναν επιλογέα σαν αυτό. Απλώς δεν λειτουργεί. Ίσως κάποια μέρα θα υπάρξει λύση, αλλά δεν υπάρχει τώρα.
Μπορείτε να κάνετε όπως:
.parent ( fill: red; )Και αυτό το γέμισμα θα περάσει και θα επηρεάσει τα παιδικά στοιχεία εάν δεν υπάρχει τίποτα πιο συγκεκριμένο στον τρόπο. Ή
.child ( fill: red; )και επηρεάζουν όλες τις περιπτώσεις αυτού του παιδιού. Αλλά όχι και τα δύο.
Εάν χρειάζεστε διαφορετικές εκδόσεις του ίδιου πράγμα…
Απλώς αντιγράψτε το ή ό, τι χρειάζεστε. Η συντριπτική πλειονότητα των πληροφοριών θα είναι πανομοιότυπες και το GZip τρώει πανομοιότυπο κείμενο για πρωινό.