From 86dce87d9dbc65e0706a4ca1949af4fe5e4697aa Mon Sep 17 00:00:00 2001 From: Maxim <54762420+mpstv@users.noreply.github.com> Date: Mon, 4 Oct 2021 18:48:10 +0300 Subject: [RU] Update paint-order page translation (#2633) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update paint-order page tranlsation Обновил перевод страницы `paint-order` пытаясь поправить https://github.com/mdn/translated-content/issues/2594. * Change example name * Rename index.html to index.md * Update index.md Co-authored-by: Alexey Pyltsyn --- files/ru/web/css/paint-order/index.md | 105 ++++++++++++++++++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 files/ru/web/css/paint-order/index.md (limited to 'files/ru/web/css/paint-order/index.md') diff --git a/files/ru/web/css/paint-order/index.md b/files/ru/web/css/paint-order/index.md new file mode 100644 index 0000000000..c5bb122886 --- /dev/null +++ b/files/ru/web/css/paint-order/index.md @@ -0,0 +1,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)) и элемента [``](/en-US/docs/Web/SVG/Element/marker). Они не применяются к тексту HTML, в этом случае вы можете определить только порядок `stroke` и `fill`. + +### Значения + +- `normal` + - : Окрасит различные части в обычном порядке. +- `stroke`, + `fill`, + `markers` + - : Указываются некоторые или все эти значения в том порядке, в котором вы хотите увидеть отрисовку. + +## Формальное определение + +{{cssinfo}} + +## Формальный синтаксис + +{{csssyntax}} + +## Примеры + +### Изменение порядка отрисовки обводки и заливки на противоположный + +#### SVG + +```html + + stroke in front + stroke behind + +``` + +#### 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/) -- cgit v1.2.3-54-g00ecf