paint-order

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

Синтаксис

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

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

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

/* Глобальные значения */
paint-order: inherit;
paint-order: initial;
paint-order: revert;
paint-order: unset;

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

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

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

Значения

normal

Окрасит различные части в обычном порядке.

stroke, fill, markers

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

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

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

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

paint-order = 
normal |
[ fill || stroke || markers ]

Примеры

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

SVG

html
<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

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

Результат

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

Specification
Scalable Vector Graphics (SVG) 2
# PaintOrderProperty

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
paint-order

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Смотрите также