Atribuut CSS paint-order
mää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-order
omaduse 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 stroke
vä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 normal
või kombinatsioon fill
, stroke
ja markers
jä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 |
Lisalugemist
- Skaalautuva vektorgraafika (SVG) 2. taseme spetsifikatsioon (kandidaatide soovitus)