1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
---
title: paint-order
slug: Web/CSS/paint-order
tags:
- CSS
- Reference
- SVG
- Web
- recipe:css-property
translation_of: Web/CSS/paint-order
browser-compat: css.properties.paint-order
---
{{CSSRef}}
[CSS-свойство](/ru/docs/Web/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`.
Когда указано одно значение, то сначала отрисовывается оно, затем два других в обычном порядке друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределённое значение.
> **Note:** в контексте этого свойства, маркеры отрисовываются только при рисовании форм SVG, включающих использование свойств `marker-*` (например [`marker-start`](/en-US/docs/Web/SVG/Attribute/marker-start)) и элемента [`<marker>`](/en-US/docs/Web/SVG/Element/marker). Они не применяются к тексту HTML, в этом случае вы можете определить только порядок `stroke` и `fill`.
### Значения
- `normal`
- : Окрасит различные части в обычном порядке.
- `stroke`,
`fill`,
`markers`
- : Указываются некоторые или все эти значения в том порядке, в котором вы хотите увидеть отрисовку.
## Формальное определение
{{cssinfo}}
## Формальный синтаксис
{{csssyntax}}
## Примеры
### Изменение порядка отрисовки обводки и заливки на противоположный
#### 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;
}
```
#### Результат
{{EmbedLiveSample("Изменение_порядка_отрисовки_обводки_и_заливки_на_противоположный", "100%", 165)}}
## Спецификации
{{Specifications}}
## Поддержка браузерами
{{Compat}}
## Смотрите также
- [CSS Tricks: paint-order](https://css-tricks.com/almanac/properties/p/paint-order/)
|
