Παραγγελία χρωμάτων - CSS-Κόλπα

Η paint-orderιδιότητα CSS ορίζει τη σειρά που σχεδιάζονται σχήματα και κείμενο SVG, συμπεριλαμβανομένης της πλήρωσης, της διαδρομής και τυχόν δεικτών που ενδέχεται να χρησιμοποιούνται. Από προεπιλογή, αυτά τα χαρακτηριστικά έχουν σχεδιαστεί με την ίδια σειρά: πλήρωση, διαδρομή και δείκτες. Αυτή η ιδιότητα μας επιτρέπει να την αλλάζουμε, ώστε να έχουμε περισσότερο έλεγχο στην εμφάνιση που προκύπτει.

Όπου η συγκεκριμένη ιδιότητα λάμπει είναι με κείμενο SVG, ιδιαίτερα ένα στοιχείο που έχει τόσο πλήρωση όσο και μια διαδρομή. Σαν αυτό:

Αχ, αυτό το εγκεφαλικό είναι περίεργο. Έχει πλάτος μόνο 6 εικονοστοιχεία, αλλά καλύπτει κάπως τη γέμιση. Αυτό συμβαίνει επειδή το γέμισμα είναι βαμμένο πρώτα, από προεπιλογή, ακολουθούμενο από το εγκεφαλικό επεισόδιο. Αλλά αν αντιστρέψουμε ότι χρησιμοποιώντας την paint-orderιδιότητα, το γέμισμα χρωματίζεται τελευταία και καλύπτει τα αντιαισθητικά τμήματα του εγκεφαλικού επεισοδίου.

Ωχ, αυτό είναι πολύ καλύτερο! Μπορούμε πραγματικά να διαβάσουμε το κείμενο και η πινελιά είναι πιο αληθινή στο σχήμα των χαρακτήρων από πριν.

Σύνταξη

paint-order: normal | ( fill || stroke || markers )

Αρχική τιμή: normal
Ισχύει για: σχήματα και στοιχεία περιεχομένου κειμένου
Κληρονομικό: ναι
Τύπος κινούμενης εικόνας: διακριτός

Αξίες

/* Normal */ paint-order: normal; /* Single values */ paint-order: stroke; /* same as: stroke fill markers */ paint-order: markers; /* same as: markers fill stroke */ /* Multiple values */ paint-order: stroke fill; /* same as: stroke fill markers */ paint-order: markers stroke fill;

Αξίζει να σημειωθεί ότι είναι απολύτως νόμιμο να περάσετε μία τιμή. Για παράδειγμα, αν το κάναμε αυτό:

paint-order: stroke;

… Τότε το strokewill θα ζωγραφιστεί πρώτα, ακολουθούμενο από τις άλλες τιμές στην προεπιλεγμένη σειρά τους. Λαμβάνοντας αυτό υπόψη, αυτό το παράδειγμα ισούται με τα εξής:

Αυτό ουσιαστικά σημαίνει ότι το ακίνητο δέχεται είτε μια τιμή normalείτε έναν συνδυασμό fill, strokeκαι markersμε τη σειρά που πρέπει να είναι βαμμένα.