Maalausjärjestys - CSS-temppuja

CSS- paint-orderominaisuus asettaa SVG-muotojen ja tekstin piirtämisjärjestyksen, mukaan lukien täytön, viivan ja mahdolliset merkinnät, jotka saattavat olla käytössä. Oletuksena nämä määritteet piirretään juuri siinä järjestyksessä: täyttö, viiva ja merkinnät. Tämän ominaisuuden avulla voimme vaihtaa sitä ylöspäin, jotta voimme paremmin hallita syntyvää ulkonäköä.

Missä tämä ominaisuus todella loistaa, on SVG-teksti, erityisesti elementti, jolla on sekä täyttö että viiva. Kuten tämä:

Tuo aivohalvaus on gnarly. Se on vain 6 kuvapistettä leveä, mutta se sorta peittää täytteen. Tämä johtuu siitä, että täyteaine maalataan oletusarvoisesti ensin, jota seuraa viiva. Mutta jos käännämme tämän paint-orderominaisuuden avulla, täyttö maalataan viimeiseksi ja peittää aivohalvauksen rumaat osat.

Voi hyvä, se on paljon parempi! Voimme itse asiassa lukea tekstiä ja viiva on todellisempi merkkien muodosta kuin ennen.

Syntaksi

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

Alkuarvo: normal
Koskee muotoja ja tekstisisällön elementtejä
Peritty: kyllä
Animaation tyyppi: erillinen

Arvot

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

On syytä huomata, että yhden arvon välittäminen on täysin laillista. Esimerkiksi, jos teimme tämän:

paint-order: stroke;

… Sitten strokemaalataan ensin ja sen jälkeen muut arvot oletusjärjestyksessä. Kun tämä otetaan huomioon, tämä esimerkki on seuraava:

Tämä tarkoittaa periaatteessa sitä, että ominaisuus joko hyväksyy arvon normaltai yhdistelmän fill, strokeja markerssiinä järjestyksessä kuin ne tulisi maalata.