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.html | 104 ------------------------------- files/ru/web/css/paint-order/index.md | 105 ++++++++++++++++++++++++++++++++ 2 files changed, 105 insertions(+), 104 deletions(-) delete mode 100644 files/ru/web/css/paint-order/index.html create mode 100644 files/ru/web/css/paint-order/index.md (limited to 'files/ru/web') diff --git a/files/ru/web/css/paint-order/index.html b/files/ru/web/css/paint-order/index.html deleted file mode 100644 index 36f95f78c2..0000000000 --- a/files/ru/web/css/paint-order/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: paint-order -slug: Web/CSS/paint-order -tags: - - окраска - - отрисовка - - порядок окраски -translation_of: Web/CSS/paint-order ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

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

- -

Синтаксис

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

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

- -

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

- -
-

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

-
- -

Значения

- -
-
normal
-
Окрасит различные части в обычном порядке.
-
stroke,
- fill,
- markers
-
Указываются некоторые или все эти значения в том порядке, в котором вы хотите увидеть отрисовку.
-
- -

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

- -{{CSSSyntax}} - -

Примеры

- -

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

Результат

- -

{{EmbedLiveSample("Examples", "100%", 165)}}

- -

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

- - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "painting.html#PaintOrder", "paint-order")}}{{Spec2("SVG2")}}Первое определение.
- -

{{CSSInfo}}

- -

Поддержка браузерами

- - - -

{{Compat("css.properties.paint-order")}}

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