paint-order

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

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 для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
paint-order
Экспериментальная
Chrome Полная поддержка 35Edge Полная поддержка 17Firefox Полная поддержка 60IE Нет поддержки НетOpera Полная поддержка 22Safari Полная поддержка 8WebView Android Полная поддержка 37Chrome Android Полная поддержка 35Firefox Android Полная поддержка 60Opera Android Полная поддержка 22Safari iOS Полная поддержка 8Samsung Internet Android Полная поддержка 3.0

Легенда

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