paint-order

Свойство 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;
}

Результат

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

Спецификация
Scalable Vector Graphics (SVG) 2 # PaintOrder

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

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

См. также

CSS Tricks: paint-order

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