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

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 | [ fill || stroke || markers ]

Примеры

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
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
paint-order
Экспериментальная
Chrome Полная поддержка 35Edge Полная поддержка 17Firefox Полная поддержка 60IE Нет поддержки НетOpera Нет поддержки НетSafari Полная поддержка ДаWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Полная поддержка 60Opera Android Нет поддержки НетSafari iOS Полная поддержка ДаSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.

Метки документа и участники

Внесли вклад в эту страницу: opereverzeva
Обновлялась последний раз: opereverzeva,