Värvitellimus - CSS-trikid

Anonim

Atribuut CSS paint-ordermäärab SVG kujundite ja teksti joonistamise järjekorra, sealhulgas täitmise, käigu ja kõik kasutatavad markerid. Vaikimisi joonistatakse need atribuudid just selles järjekorras: täitmine, joonistamine ja markerid. See omadus võimaldab meil seda ümber lülitada, et saaksime saadud välimust paremini kontrollida.

See, kus see omadus tõeliselt särab, on SVG-tekstiga, eriti elemendiga, millel on nii täidis kui ka joon. Nagu nii:

Uhh, see insult on gnarne. Selle laius on ainult 6 pikslit, kuid see katab täidise. Seda seetõttu, et vaikimisi värvitakse esmalt täidis, millele järgneb joon. Kuid kui selle paint-orderomaduse abil tagasi pöörata, värvitakse täidis viimasena ja katab löögi inetuid osi.

Oh jumal, see on nii palju parem! Me võime teksti tegelikult lugeda ja löök on tegelaste kuju suhtes õigem kui varem.

Süntaks

paint-order: normal | ( fill || stroke || markers )
  • Algne väärtus: normal
  • Kehtib: kujundite ja teksti sisuelementide kohta
  • Päritud: jah
  • Animatsiooni tüüp: diskreetne

Väärtused

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

Väärib märkimist, et ühe väärtuse edastamine on täiesti seaduslik. Näiteks kui me tegime seda:

paint-order: stroke;

... siis strokevärvitakse kõigepealt test, millele järgnevad ülejäänud väärtused vaikimisi järjestuses. Seda arvesse võttes võrdub see näide järgmisega:

See tähendab põhimõtteliselt, et vara kas aktsepteerib väärtus normalvõi kombinatsioon fill, strokeja markersjärjekorras tuleb värvitud.

paint-order: stroke fill markers

Ja mis juhtub, kui väärtust ei esitata või see on kehtetu? Kasutatakse vaikekorda: täitmine, joon, markerid.

Brauseri tugi

IE Edge Firefox Chrome Safari Ooper
Ei 17+ 60+ 35+ 8+ 22+
Android Chrome Android Firefox Androidi brauser iOS-i Safari Opera Mini
85+ 79+ 81+ 8+ Kõik
Allikas: caniuse

Lisalugemist

  • Skaalautuva vektorgraafika (SVG) 2. taseme spetsifikatsioon (kandidaatide soovitus)