paint-order

Baseline 2024

Newly available

Since ⁨March 2024⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

CSS-свойствоpaint-order позволяет вам контролировать порядок, в котором отрисовываются заливка и обводка (и нарисованные маркеры) текстового содержимого и фигур.

Синтаксис

css

/* Нормальный */paint-order: normal;/* Единичное значение */paint-order: stroke; /* отрисовывает сначала обводку, затем заливку и маркеры */paint-order: markers; /* отрисовывает сначала маркеры, затем заливку и обводку *//* Множественные значения */paint-order: stroke fill; /* отрисовывает сначала обводку, затем заливку, затем маркеры */paint-order: markers stroke fill; /* отрисовывает маркеры, затем обводку, затем заливку *//* Глобальные значения */paint-order: inherit;paint-order: initial;paint-order: revert;paint-order: unset;

Если значение не указано, значением по умолчанию является следующий порядокfill,stroke,markers.

Когда указано одно значение, то сначала отрисовывается оно, затем два других в обычном порядке друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределённое значение.

Примечание:В контексте этого свойства, маркеры отрисовываются только при рисовании форм SVG, включающих использование свойствmarker-* (напримерmarker-start) и элемента<marker>. Они не применяются к тексту HTML, в этом случае вы можете определить только порядокstroke иfill.

Значения

normal: Окрасит различные части в обычном порядке.
stroke,fill,markers: Указываются некоторые или все эти значения в том порядке, в котором вы хотите увидеть отрисовку.

Формальное определение

Начальное значение	`normal`
Применяется к	текстовые элементы
Наследуется	да
Обработка значения	как указано
Animation type	discrete

Формальный синтаксис

paint-order =
normal|
[fill||stroke||markers]

Примеры

Изменение порядка отрисовки обводки и заливки на противоположный

SVG

html

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">  <text x="10" y="75">stroke in front</text>  <text x="10" y="150">stroke behind</text></svg>

CSS

css

text {  font-family: sans-serif;  font-size: 50px;  font-weight: bold;  fill: black;  stroke: red;  stroke-width: 4px;}.stroke-behind {  paint-order: stroke fill;}