Naročilo barve - CSS-triki | Almanah CSS 2025

Lastnost CSS paint-ordernastavi vrstni red risanja oblik in besedila SVG, vključno s polnilom, potezo in morebitnimi označevalci, ki so morda v uporabi. Privzeto so ti atributi narisani prav v tem vrstnem redu: zapolnitev, črta in oznake. Ta lastnost nam omogoča, da jo preklopimo, tako da imamo več nadzora nad nastalim videzom.

Ta lastnost resnično blesti pri besedilu SVG, zlasti pri elementu, ki ima polnilo in potezo. Všečkaj to:

Uf, ta kap je hudobna. Širok je le 6 slikovnih pik, vendar nekako pokriva polnilo. To je zato, ker je polnilo najprej privzeto pobarvano, nato pa poteza. Če pa to paint-orderlastnost obrnemo , se polnilo nazadnje pobarva in prekrije grde dele poteze.

Joj, tako bolje! Besedilo lahko dejansko preberemo in poteza je bolj resnična glede na obliko znakov kot prej.

Sintaksa

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

Začetna vrednost: normal
Velja za: oblike in elemente vsebine besedila
Podedovano: da
Vrsta animacije: diskretna

Vrednote

/* 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;

Omeniti velja, da je povsem upravičeno, da prenesemo eno vrednost. Na primer, če bi to storili:

paint-order: stroke;

… Potem strokebo najprej pobarvan znak , nato pa ostale vrednosti v njihovem privzetem vrstnem redu. Ob upoštevanju tega je ta primer enak naslednjemu:

To v bistvu pomeni, da je lastnina bodisi sprejme vrednost normalali kombinacijo fill, strokein markersv vrstnem redu, jih je treba pobarvane.