Свойство CSS `paint-order`

Базовая поддержка Недавно стало доступно

Эта функция работает на последних устройствах и в последних версиях браузеров. Она может не работать на старых устройствах и в старых версиях браузеров. Она поддерживается во всех браузерах с марта 2024 года.

Свойство paint-order CSS позволяет управлять порядком отрисовки заливки, обводки и маркеров текста и фигур.

Синтаксис

/* Normal */
paint-order: normal;

/* Single values */
paint-order: stroke; /* draw the stroke first, then fill and markers */
paint-order: markers; /* draw the markers first, then fill and stroke */

/* Multiple values */
paint-order: stroke fill; /* draw the stroke first, then the fill, then the markers */
paint-order: markers stroke fill; /* draw markers, then stroke, then fill */

/* Global values */
paint-order: inherit;
paint-order: initial;
paint-order: revert;
paint-order: revert-layer;
paint-order: unset;

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

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

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

Значения

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

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

Начальное значение	normal
Применяется к	текстовым элементам
Наследуется	да
Вычисленное значение	как задано
Тип анимации	дискретный

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

paint-order = 
  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;
}

Результат

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

Чтобы управлять порядком заливки и обводки в HTML, можно использовать свойства CSS -webkit-text-stroke-color и -webkit-text-stroke-width.

HTML

<div>stroke in front</div>
<div class="stroke-behind">stroke behind</div>

CSS

div {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  padding-top: 10px;
  padding-bottom: 10px;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}

Результат

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

Спецификация
Масштабируемая векторная графика (SVG) 2 # PaintOrderProperty

Совместимость с браузерами

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`paint-order`	123 35–123 Не влияет на текст HTML с обводкой, см. ошибку 41372165	123 79–123 Не влияет на текст HTML с обводкой, см. ошибку 41372165	60	109 22–109 Не влияет на текст HTML с обводкой, см. ошибку 41372165	11 8–11 Не влияет на текст HTML с обводкой, см. ошибку 168601	123 35–123 Не влияет на текст HTML с обводкой, см. ошибку 41372165	60	82 22–82 Не влияет на текст HTML с обводкой, см. ошибку 41372165	11 8–11 Не влияет на текст HTML с обводкой, см. ошибку 168601	27.0 3.0–27.0 Не влияет на текст HTML с обводкой, см. ошибку 41372165	123 37–123 Не влияет на текст HTML с обводкой, см. ошибку 41372165	11 8–11 Не влияет на текст HTML с обводкой, см. ошибку 168601
`fill`	35	79	60	22	8	35	60	22	8	3.0	37	8
`markers`	35	79	60	22	8	35	60	22	8	3.0	37	8
`normal`	35	79	60	22	8	35	60	22	8	3.0	37	8
`stroke`	35	79	60	22	8	35	60	22	8	3.0	37	8

См. также

CSS Tricks: paint-order

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/paint-order