Поръчка на боя - CSS-трикове

paint-orderСвойството CSS задава реда на изчертаване на SVG фигури и текст, включително запълване, щрих и всички маркери, които може да се използват. По подразбиране тези атрибути се изчертават в същия ред: запълване, щрих и маркери. Това свойство ни позволява да го превключваме, за да имаме по-голям контрол върху получения резултат.

Когато това свойство наистина блести, е SVG текстът, особено елемент, който има едновременно запълване и щрих. Като този:

Уф, този удар е кофти. Широк е само 6 пиксела, но по някакъв начин покрива запълването. Това е така, защото запълването се боядисва първо, по подразбиране, последвано от щриха. Но ако обърнем това, като използваме paint-orderсвойството, запълването се боядисва последно и покрива грозните части на щриха.

О, боже, това е много по-добре! Всъщност можем да четем текста и щрихът е по-истински за формата на знаците от преди.

Синтаксис

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

Начална стойност: normal
Отнася се за: форми и елементи на текстовото съдържание
Наследен: да
Тип анимация: дискретна

Стойности

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

Струва си да се отбележи, че е напълно законно да се предаде една стойност. Например, ако направихме това:

paint-order: stroke;

... тогава strokeпърво ще бъде боядисано, последвано от останалите стойности в техния ред по подразбиране. Като се има предвид това, този пример е равен на следното:

Това по същество означава, че имотът или приема стойност от normalили комбинация от fill, strokeи markersв реда, в който трябва да бъдат боядисани.