paint-order¶
Свойство paint-order
позволяет вам контролировать порядок, в котором отрисовываются заливка и обводка (и нарисованные маркеры) текстового содержимого и фигур.
Текст
- letter-spacing
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-decoration-thickness
- text-decoration-skip
- text-decoration-skip-ink
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-rendering
- text-shadow
- text-underline-position
- text-transform
- white-space
- word-spacing
Синтаксис¶
/* Нормальный */
paint-order: normal;
/* Единичное значение */
/* отрисовывает сначала обводку, затем заливку и маркеры */
paint-order: stroke;
/* отрисовывает сначала маркеры, затем заливку и обводку */
paint-order: markers;
/* Множественные значения */
/* отрисовывает сначала обводку, затем заливку, затем маркеры */
paint-order: stroke fill;
/* отрисовывает маркеры, затем обводку, затем заливку */
paint-order: markers stroke fill;
Если значение не указано, значением по умолчанию является следующий порядок fill
, stroke
, markers
.
Когда указано одно значение, то сначала отрисовывается оно, затем два других в дефолтном поряд друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределенное значение.
Значения¶
normal
- Окрасит различные части в обычном порядке.
stroke
,fill
,markers
- Указываются некоторые или все эти значения в том порядке, в котором вы хотите увидеть отрисовку.
Спецификация¶
Пример¶
<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>
text {
font-family: sans-serif;
font-size: 50px;
font-weight: bold;
fill: black;
stroke: red;
stroke-width: 4px;
}
.stroke-behind {
paint-order: stroke fill;
}