Dažų užsakymas - CSS-gudrybės

Anonim

CSS paint-orderypatybė nustato SVG formų ir teksto brėžimo tvarką, įskaitant užpildymą, brūkšnį ir visus galimus naudoti žymenis. Pagal numatytuosius nustatymus tie atributai brėžiami tokia pačia tvarka: užpildymas, brūkšnys ir žymekliai. Ši savybė leidžia mums ją perjungti, kad galėtume labiau kontroliuoti atsiradusią išvaizdą.

Kur ši savybė iš tikrųjų šviečia, yra SVG tekstas, ypač elementas, turintis ir užpildą, ir brūkšnį. Kaip šitas:

Ugh, tas insultas yra niūrus. Jis yra tik 6 taškų pločio, tačiau jis užpildo užpildą. Taip yra todėl, kad pagal nutylėjimą pirmiausia nudažomas užpildas, o po to - potėpis. Bet jei mes pakeisime tai naudodami paint-ordernuosavybę, užpildas bus dažomas paskutinis ir padengs negražias smūgio dalis.

O dieve, tai yra daug geriau! Mes iš tikrųjų galime perskaityti tekstą, o braižas yra tikresnis už simbolių formą nei anksčiau.

Sintaksė

paint-order: normal | ( fill || stroke || markers )
  • Pradinė vertė: normal
  • Taikoma: formoms ir teksto turinio elementams
  • Paveldima: taip
  • Animacijos tipas: diskretiškas

Vertybės

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

Verta paminėti, kad visiškai teisėta perduoti vieną vertę. Pavyzdžiui, jei tai padarėme:

paint-order: stroke;

... tada pirmiausia strokebus nudažytas testas, paskui kitos vertės pagal numatytąją tvarką. Atsižvelgiant į tai, šis pavyzdys yra lygus šiam pavyzdžiui:

Tai iš esmės reiškia, kad nuosavybė arba priima vertę, normalarba jų derinį fill, strokeir markerstokia tvarka, kokia turėtų būti nudažyta.

paint-order: stroke fill markers

O kas nutiks, jei nenurodoma jokia vertė arba neteisinga? Bus naudojama numatytoji tvarka: užpildymas, brūkšnys, žymekliai.

Naršyklės palaikymas

T.Y Briauna „Firefox“ „Chrome“ „Safari“ Opera
Ne 17+ 60+ 35+ 8+ 22+
„Android Chrome“ „Android Firefox“ „Android“ naršyklė „iOS Safari“ „Opera Mini“
85+ 79+ 81+ 8+ Viskas
Šaltinis: caniuse

Papildoma literatūra

  • „Scalable Vector Graphics“ (SVG) 2 lygio specifikacija (kandidato rekomendacija)