Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS свойство clip-path создает ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (circle()).

Историческая справка: Свойство clip-path заменило устаревшее свойство clip .

/* 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;

/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

Начальное значениеnone
Применяется квсе элементы; в SVG, это применяется к контейнерам, исключая элемент defs и все графические элементы
Наследуетсянет
Процентыrefer to reference box when specified, otherwise border-box
Отображениевизуальный
Обработка значениякак указано, но с абсолютными значениями url
Animation typeда, как указано для basic-shape, иначе нет
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

Свойство clip-path определяется как одно или комбинация значений перечисленных ниже.

Значения

url()
Представляет URL ссылку на траекторию, ограничивающую элемент.
inset(), circle(), ellipse(), polygon()
Функция <basic-shape>. Размер и положение области определяется значением <geometry-box>. Если геометрия не определена,border-box будет использоваться в качестве блока.
<geometry-box>
Если определен в комбинации с <basic-shape>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как border-radius). Геометрия может быть определена с помощью одного из следующих значений:  
fill-box
Использует границы объекта в качестве базовой области.
stroke-box
Использует stroke bounding box в качестве базовой области.
view-box
Использует ближайший SVG viewport в качестве базового блока. Если отриут viewBox определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом viewBox и ширина и высота базового блока устанавливаются равными значениям атрибута viewBox.​​​​​​​
margin-box
Использует margin box в качестве базового блока.
border-box
Использует border box в качестве базового блока.
padding-box
Использует padding box в качестве базового блока.
content-box
Использует content box в качестве базового блока.
none
Обрезанная область не создается.

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

<clip-source> | [ <basic-shape> || <geometry-box> ] | none

где
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

где
<inset()> = inset( <length-percentage>{1,4} [ round <border-radius> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box

где
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

Примеры

/* 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);
}

Живой пример

HTML

<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
    alt="MDN logo">
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90"/>
      <rect x="0" y="110" width="90" height="90"/>
      <rect x="137" y="0" width="90" height="90"/>
      <rect x="0" y="0" width="90" height="90"/>
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
</select>

CSS

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}

Результат

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

Спецификация Статус Комментарий
CSS Masking Module Level 1
Определение 'clip-path' в этой спецификации.
Кандидат в рекомендации Extends its application to HTML elements.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение 'clip-path' в этой спецификации.
Рекомендация Initial definition (applies to SVG elements only).

Совместимость

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
On HTML elements 24-webkit[1]
55.0
Нет[2] 3.5 (1.9.1) Нет (Да)-webkit[1] Нет[3]
<basic-shape> 55.0 Нет[2] 54 (54)[5] Нет 42.0 Нет[3]
On SVG content 55.0 20 (12.10240)[4] 52 (52)[6] (Да)[4] 42.0 Нет[3]
inset() 55.0 Нет[2] 54 (54)[5] Нет 42.0 Нет[3]
Animations 55.0 Нет[2] 49 (49) Нет 42.0 Нет[3]
fill-box and stroke-box Нет Нет[2] 51 (51)[7] Нет Нет Нет[3]
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
On HTML elements 55.0 55.0 Нет 1.0 (1.9.1) Нет ? Нет[3] (Да) -webkit
55.0
<basic-shape> 55.0 55.0 Нет 54.0 (54)[5] Нет ? Нет[3] 55.0
On SVG content 55.0 55.0 20 (12.10240)[4] 52.0 (52)[6] Нет ? Нет[3] 55.0
inset() 55.0 55.0 Нет 54.0 (54)[5] Нет ? Нет[3] 55.0
Animations 55.0 55.0 Нет 49.0 (49) Нет ? Нет[3] 55.0
fill-box and stroke-box Нет Нет Нет 51 (51)[7] Нет ? Нет[3] Нет

[1] Chrome и Opera в данный момент не поддерживают внешние SVG.

[2] Edge пока не поддерживают данную возможность. Она запрошена на следующей странице Edge User Voice. Смотрите также Edge Development page.

[3] Safari пока не поддерживает эту возможность. Подробнее Баг WebKit 126207.

[4] Internet Explorer и Edge в настоящее время поддерживают только области, определенные с помощьюurl().

[5] Данную возможность можно настроить с помощью настройки layout.css.clip-path-shapes.enabled, по умолчанию выставлена в false, начиная с Gecko 47 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44). Базовые области за исключениемinset() были реализованы баг 1075457, inset() реализована в баг 1246762. Начиная с Gecko 53 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) настройка имеет значение по умолчанию true в Nightly иDeveloper Edition (баг 1303654), начиная с Gecko 54 (Firefox 54.0 / Thunderbird 54.0 / SeaMonkey 2.51) она также включена в Beta и Stable релизах баг 1247229.

[6] Эта возможность внедрена в баг 1246741.

[7] До версии Firefox 51, fill-box иstroke-box были отсылками к border-box.

Смотрите также

Метки документа и участники

 Внесли вклад в эту страницу: torbasow, AntonPanteleev
 Обновлялась последний раз: torbasow,