From 8e8a6bc9a49943c3d945afb2943e4f695d720e02 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sun, 12 Nov 2023 20:26:27 +0300 Subject: [PATCH] [ru]: update docs/Web/CSS/clip-path translation (#12578) --- files/ru/web/css/clip-path/index.md | 280 +++++++++++++++------------- 1 file changed, 148 insertions(+), 132 deletions(-) diff --git a/files/ru/web/css/clip-path/index.md b/files/ru/web/css/clip-path/index.md index f3e1e7c6c82462..da7f289f0b65d6 100644 --- a/files/ru/web/css/clip-path/index.md +++ b/files/ru/web/css/clip-path/index.md @@ -3,42 +3,105 @@ title: clip-path slug: Web/CSS/clip-path --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -[CSS](/ru/docs/Web/CSS) свойство **`clip-path`** создаёт ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг ([`circle()`](/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/circle)). +[CSS](/ru/docs/Web/CSS)-свойство `clip-path` создаёт ограниченную область, которая определяет какая часть элемента должна быть видимой. Части, которые находятся внутри области, видимы, а части вне области скрыты. -> **Примечание:** Свойство clip-path заменило устаревшее свойство {{cssxref("clip")}} . +{{EmbedInteractiveExample("pages/css/clip-path.html")}} + +## Синтаксис ```css -/* Keyword values */ +/* Значения ключевых слов */ clip-path: none; -/* Image values */ +/* Значения */ clip-path: url(resources.svg#c1); -/* Box values */ -clip-path: fill-box; -clip-path: stroke-box; -clip-path: view-box; +/* Значения */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; +clip-path: fill-box; +clip-path: stroke-box; +clip-path: view-box; -/* Geometry values */ +/* Значения */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); +clip-path: ellipse(50px 60px at 0 10% 20%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); +clip-path: path( + "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" +); -/* Box and geometry values combined */ +/* Комбинация значений границ и формы блока */ clip-path: padding-box circle(50px at 0 100px); -/* Global values */ +/* Глобальные значения */ clip-path: inherit; clip-path: initial; +clip-path: revert; +clip-path: revert-layer; clip-path: unset; ``` +Свойство `clip-path` определяется как значение или комбинация значений перечисленных ниже. + +### Значения + +- `` + - : {{cssxref("url", "url()")}} указывающий на [SVG](/ru/docs/Web/SVG)-элемент {{SVGElement("clipPath")}} . +- {{cssxref("<basic-shape>")}} + + - : Форма, размер и расположение которой определяется значением ``. Если геометрия не указана, то в качестве блока будет использоваться `border-box`. Может определяться одной из следующих функций: + - {{cssxref("basic-shape/inset","inset()")}} + - : Определяет внутренний прямоугольник. + - {{cssxref("basic-shape/circle","circle()")}} + - : Определяет окружность, используя радиус и расположение. + - {{cssxref("basic-shape/ellipse","ellipse()")}} + - : Определяет эллипс, используя два радиуса и расположение. + - {{cssxref("basic-shape/polygon","polygon()")}} + - : Определяет многоугольник, используя стиль заполнения фигуры и набор вершин. + - {{cssxref("path","path()")}} + - : Определяет фигуру, используя объявление SVG фигуры и правило заполнения. + +- `` + + - : При использовании в сочетании с `` это значение определяет блок для базовой области. При самостоятельном использовании определяет границы указанного блока, включая формирование углов (например, {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений: + - `margin-box` + - : Использует [margin box](/ru/docs/Web/CSS/CSS_shapes/From_box_values#margin-box) для определения блока. + - `border-box` + - : Использует [border box](/ru/docs/Web/CSS/CSS_shapes/From_box_values#border-box) для определения блока. + - `padding-box` + - : Использует [padding box](/ru/docs/Web/CSS/CSS_shapes/From_box_values#padding-box) для определения блока. + - `content-box` + - : Использует [content box](/ru/docs/Web/CSS/CSS_shapes/From_box_values#content-box) для определения блока. + - `fill-box` + - : Использует область заливки объекта для определения блока. + - `stroke-box` + - : Использует границы объекта для определения блока. + - `view-box` + - : Использует ближайший SVG вьюпорт для определения блока. Если атрибут {{SVGAttr("viewBox")}} определён для элемента, создающего вьюпорт, то блок будет позиционироваться в координатной системе, установленной атрибутом `viewBox`, а размеры блока устанавливаются равными значениям ширины и высоты атрибута `viewBox`. + +- `none` + - : Область не создается. + +> **Примечание:** Значение, отличное от `none`, приводит к созданию нового [контекста наложения](/ru/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) так же, как при использовании значений CSS-свойства {{cssxref("opacity")}}, отличных от `1`. + +## Формальное определение + +{{cssinfo}} + +### Формальный синтаксис + +{{csssyntax}} + +## Примеры + +### Сравнение HTML и SVG + ```html hidden @@ -56,17 +119,17 @@ clip-path: unset;
HTML
-

I LOVE
clipping

+

Я люблю
разные формы

SVG -
+
- I LOVE - clipping + Я люблю + разные формы
@@ -75,7 +138,7 @@ clip-path: unset;
clip-path: url(#myPath)

- Assuming the following clipPath definition: + Для этого примера определим такой вспомогательный элемент: 
 <svg>
   <clipPath id="myPath" clipPathUnits="objectBoundingBox">
@@ -92,17 +155,17 @@ clip-path: unset;
       

         HTML
         

-          
I LOVE
clipping

+          
Я люблю
разные формы

         

       

       

         SVG
-        

+        

           
             
               
-              I LOVE
-              clipping
+              Я люблю
+              разные формы
             
           
         

@@ -117,17 +180,17 @@ clip-path: unset;
       

         HTML
         

-          
I LOVE
clipping

+          
Я люблю
разные формы

         

       

       

         SVG
-        

+        

           
             
               
-              I LOVE
-              clipping
+              Я люблю
+              разные формы
             
           
         

@@ -139,17 +202,17 @@ clip-path: unset;
       

         HTML
         

-          
I LOVE
clipping

+          
Я люблю
разные формы

         

       

       

         SVG
-        

+        

           
             
               
-              I LOVE
-              clipping
+              Я люблю
+              разные формы
             
           
         

@@ -161,17 +224,17 @@ clip-path: unset;
       

         HTML
         

-          
I LOVE
clipping

+          
Я люблю
разные формы

         

       

       

         SVG
-        

+        

           
             
               
-              I LOVE
-              clipping
+              Я люблю
+              разные формы
             
           
         

@@ -183,17 +246,17 @@ clip-path: unset;
       

         HTML
         

-          
I LOVE
clipping

+          
Я люблю
разные формы

         

       

       

         SVG
-        

+        

           
             
               
-              I LOVE
-              clipping
+              Я люблю
+              разные формы
             
           
         

@@ -205,17 +268,17 @@ clip-path: unset;
       

         HTML
         

-          
I LOVE
clipping

+          
Я люблю
разные формы

         

       

       

         SVG
-        

+        

           
             
               
-              I LOVE
-              clipping
+              Я люблю
+              разные формы
             
           
         

@@ -227,17 +290,17 @@ clip-path: unset;
       

         HTML
         

-          
I LOVE
clipping

+          
Я люблю
разные формы

         

       

       

         SVG
-        

+        

           
             
               
-              I LOVE
-              clipping
+              Я люблю
+              разные формы
             
           
         

@@ -249,17 +312,17 @@ clip-path: unset;
       

         HTML
         

-          
I LOVE
clipping

+          
Я люблю
разные формы

         

       

       

         SVG
-        

+        

           
             
               
-              I LOVE
-              clipping
+              Я люблю
+              разные формы
             
           
         

@@ -271,17 +334,17 @@ clip-path: unset;
       

         HTML
         

-          
I LOVE
clipping

+          
Я люблю
разные формы

         

       

       

         SVG
-        

+        

           
             
               
-              I LOVE
-              clipping
+              Я люблю
+              разные формы
             
           
         

@@ -293,17 +356,17 @@ clip-path: unset;
       

         HTML
         

-          
I LOVE
clipping

+          
Я люблю
разные формы

         

       

       

         SVG
-        

+        

           
             
               
-              I LOVE
-              clipping
+              Я люблю
+              разные формы
             
           
         

@@ -315,17 +378,17 @@ clip-path: unset;
       

         HTML
         

-          
I LOVE
clipping

+          
Я люблю
разные формы

         

       

       

         SVG
-        

+        

           
             
               
-              I LOVE
-              clipping
+              Я люблю
+              разные формы
             
           
         

@@ -389,7 +452,7 @@ body {
   position: relative;
 }
 
-.container:before {
+.container::before {
   content: "margin";
   position: absolute;
   top: 2px;
@@ -397,14 +460,14 @@ body {
   font: italic 0.6em sans-serif;
 }
 
-.viewbox {
+.view-box {
   box-shadow:
     1rem 1rem 0 #efefef inset,
     -1rem -1rem 0 #efefef inset;
 }
 
-.container.viewbox:after {
-  content: "viewbox";
+.container.view-box::after {
+  content: "view-box";
   position: absolute;
   left: 1.1rem;
   top: 1.1rem;
@@ -497,65 +560,11 @@ svg text.em {
 }
 ```
 
-{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}
-
-{{cssinfo}}
-
-## Синтаксис
-
-Свойство `clip-path` определяется как одно или комбинация значений перечисленных ниже.
-
-### Значения
-
-- `url()`
-  - : Представляет URL ссылку на траекторию, ограничивающую элемент.
-- `inset()`, `circle()`, `ellipse()`, `polygon()`
-  - : Функция {{cssxref("<basic-shape>")}}. Размер и положение области определяется значением ``. Если геометрия не определена, `border-box` будет использоваться в качестве блока.
-- ``
-  - : Если определён в комбинации с ``, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений:
-    - `fill-box`
-      - : Использует границы объекта в качестве базовой области.
-    - `stroke-box`
-      - : Использует stroke bounding box в качестве базовой области.
-    - `view-box`
-      - : Использует ближайший SVG viewport в качестве базового блока. Если атрибут {{SVGAttr("viewBox")}} определён для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом `viewBox` и ширина и высота базового блока устанавливаются равными значениям атрибута `viewBox`.
-    - `margin-box`
-      - : Использует [margin box](CSS_Box_Model/Introduction_to_the_CSS_box_model) в качестве базового блока.
-    - `border-box`
-      - : Использует [border box](CSS_Box_Model/Introduction_to_the_CSS_box_model) в качестве базового блока.
-    - `padding-box`
-      - : Использует [padding box](CSS_Box_Model/Introduction_to_the_CSS_box_model) в качестве базового блока.
-    - `content-box`
-      - : Использует [content box](CSS_Box_Model/Introduction_to_the_CSS_box_model) в качестве базового блока.
-- `none`
-  - : Обрезанная область не создается.
-
-### Формальный синтаксис
-
-{{csssyntax}}
-
-## Примеры
-
-```css
-/* Inline SVG  */
-.target {
-  clip-path: url(#c1);
-}
-
-/* External SVG */
-.anothertarget {
-  clip-path: url(resources.svg#c1);
-}
-
-/* Circle shape */
-.circleClass {
-  clip-path: circle(15px at 20px 20px);
-}
-```
+{{EmbedLiveSample("Сравнение_HTML_и_SVG", "100%", "800px")}}
 
-## Живой пример
+### Полный пример
 
-### HTML
+#### HTML
 
 ```html
 MDN logo
@@ -575,10 +584,13 @@ svg text.em {
   
   
   
+  
 
 ```
 
-### CSS
+#### CSS
 
 ```css
 #clipped {
@@ -588,27 +600,31 @@ svg text.em {
 ```
 
 ```js hidden
-var clipPathSelect = document.getElementById("clipPath");
-clipPathSelect.addEventListener("change", function (evt) {
+const clipPathSelect = document.getElementById("clipPath");
+clipPathSelect.addEventListener("change", (evt) => {
   document.getElementById("clipped").style.clipPath = evt.target.value;
 });
 ```
 
-### Результат
+#### Результат
 
-{{EmbedLiveSample("Живой_пример", 230, 250)}}
+{{EmbedLiveSample("Полный_пример", 230, 250)}}
 
 ## Спецификации
 
 {{Specifications}}
 
-## Совместимость
+## Совместимость с браузерами
 
 {{Compat}}
 
 ## Смотрите также
 
-- [clip-rule](/ru/docs/Web/SVG/Attribute/clip-rule), {{cssxref("mask")}}, {{cssxref("filter")}}
-- [CSS Shapes, clipping and masking – and how to use them](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)
-- [Applying SVG effects to HTML content](/ru/docs/Applying_SVG_effects_to_HTML_content)
-- {{SVGAttr("clip-path")}} SVG attribute
+- [Shapes in clipping and masking – and how to use them](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)
+- [Применение эффектов SVG к содержимому HTML](/ru/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
+- CSS-свойства:
+  - {{cssxref("mask")}}
+  - {{cssxref("filter")}}
+- Атрибуты SVG:
+  - {{SVGAttr("clip-path")}}
+  - {{SVGAttr("clip-rule")}}