Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
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;
mlk
Начальное значение | 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()> | <path()>
<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> ]# )
<path()> = path( [ <fill-rule>, ]? <string> )
<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);
}
JavaScript
Результат
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
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). |
Совместимость
BCD tables only load in the browser