Краска-заказ - CSS-хитрости

Свойство CSS paint-orderустанавливает порядок рисования фигур и текста 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в порядке , они должны быть окрашены.