Objednávka farieb - Triky CSS

Anonim

Vlastnosť CSS paint-ordernastavuje poradie vykreslenia tvarov a textu SVG vrátane výplne, ťahu a akýchkoľvek značiek, ktoré sa môžu použiť. Predvolene sa tieto atribúty kreslia v tomto poradí: výplň, ťah a značky. Táto vlastnosť nám umožňuje prepnúť ju, aby sme mali väčšiu kontrolu nad výsledným vzhľadom.

Táto vlastnosť skutočne žiari, je v prípade textu SVG, najmä prvku, ktorý má výplň aj ťah. Páči sa ti to:

Uf, ten úder je drsný. Je to len 6px široký, ale trochu to zakrýva. Je to tak preto, lebo predvolene sa najskôr vymaľuje výplň a potom ťah. Ak to ale zvrátime pomocou tejto paint-ordervlastnosti, výplň sa vymaľuje ako posledná a zakrýva nevzhľadné časti ťahu.

Ach bože, to je oveľa lepšie! V skutočnosti dokážeme prečítať text a ťah je vernejší tvaru znakov ako predtým.

Syntax

paint-order: normal | ( fill || stroke || markers )
  • Pôvodná hodnota: normal
  • Týka sa: tvarov a prvkov textového obsahu
  • Zdedené: áno
  • Typ animácie: diskrétna

Hodnoty

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

Stojí za zmienku, že odovzdať jednu hodnotu je úplne legitímne. Napríklad, ak by sme to urobili:

paint-order: stroke;

... potom strokesa najskôr vymaľuje znak, za ktorým nasledujú ďalšie hodnoty v ich predvolenom poradí. Ak zoberieme do úvahy, tento príklad sa rovná nasledujúcemu:

To v podstate znamená, že majetok buď akceptuje hodnotu normalalebo kombinácie fill, strokea markersv poradí, v akom by mala byť natretá.

paint-order: stroke fill markers

A čo sa stane, ak nie je poskytnutá žiadna alebo neplatná hodnota? Použije sa predvolené poradie: výplň, ťah, značky.

Podpora prehliadača

IE Hrana Firefox Chrome Safari Opera
Nie 17+ 60+ 35+ 8+ 22+
Android Chrome Android Firefox Prehliadač Android iOS Safari Opera Mini
85+ 79+ 81+ 8+ Všetky
Zdroj: caniuse

Ďalšie čítanie

  • Škálovateľná vektorová grafika (SVG) úrovne 2 - špecifikácia (odporúčanie kandidáta)