paint-order

Experimental

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

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

Синтаксис

/* Нормальный */
paint-order: normal;

/* Единичное значение */
paint-order: stroke; /* отрисовывает сначала обводку, затем заливку и маркеры */
paint-order: markers; /* отрисовывает сначала маркеры, затем заливку и обводку */

/* Множественные значения */
paint-order: stroke fill; /* отрисовывает сначала обводку, затем заливку, затем маркеры */
paint-order: markers stroke fill; /* отрисовывает маркеры, затем обводку, затем заливку */

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

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

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

Значения

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

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

normal | (en-US) [ (en-US) fill || (en-US) stroke || (en-US) markers ] (en-US)

Примеры

SVG

<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" class="stroke-behind">stroke behind</text>
</svg>

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;
}

Результат

Спецификации

Спецификация Статус Комментарий
Scalable Vector Graphics (SVG) 2
Определение 'paint-order' в этой спецификации.
Кандидат в рекомендации Первое определение.

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

Поддержка браузерами

BCD tables only load in the browser