paint-order
Baseline 2024 Newly available
Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
CSS-свойство paint-order позволяет вам контролировать порядок, в котором отрисовываются заливка и обводка (и нарисованные маркеры) текстового содержимого и фигур.
Синтаксис
/* Нормальный */ 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 type | discrete |
Формальный синтаксис
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; } Результат
Спецификации
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # PaintOrderProperty |
Совместимость с браузерами
Loading…