Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
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;
<svg class="defs">
<defs>
<clipPath id="myPath" clipPathUnits="objectBoundingBox">
<path d="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" />
</clipPath>
</defs>
</svg>
<div class="grid">
<div class="col">
<div class="note">clip-path: none</div>
<div class="row">
<div class="cell"> <span>HTML</span>
<div class="container">
<p class="none">
I LOVE<br><em>clipping</em>
</p>
</div>
</div>
<div class="cell"> <span>SVG</span>
<div class="container viewbox">
<svg viewBox="0 0 192 192">
<g class="none">
<rect x="24" y="24" width="144" height="144" />
<text x="96" y="91">I LOVE</text>
<text x="96" y="109" class="em">clipping</text>
</g>
</svg>
</div>
</div>
</div>
<div class="note">clip-path: url(#myPath)<br><br>
Assuming the following clipPath definition:
<pre>
<svg>
<clipPath id="myPath" clipPathUnits="objectBoundingBox">
<path d="M0.5,1
C 0.5,1,0,0.7,0,0.3
A 0.25,0.25,1,1,1,0.5,0.3
A 0.25,0.25,1,1,1,1,0.3
C 1,0.7,0.5,1,0.5,1 Z" />
</clipPath>
</svg></pre>
</div>
<div class="row">
<div class="cell"> <span>HTML</span>
<div class="container">
<p class="svg">
I LOVE<br><em>clipping</em>
</p>
</div>
</div>
<div class="cell"> <span>SVG</span>
<div class="container viewbox">
<svg viewBox="0 0 192 192">
<g class="svg">
<rect x="24" y="24" width="144" height="144" />
<text x="96" y="91">I LOVE</text>
<text x="96" y="109" class="em">clipping</text>
</g>
</svg>
</div>
</div>
</div>
<div class="note">clip-path: circle(25%)</div>
<div class="row">
<div class="cell"> <span>HTML</span>
<div class="container">
<p class="shape1">
I LOVE<br><em>clipping</em>
</p>
</div>
</div>
<div class="cell"> <span>SVG</span>
<div class="container viewbox">
<svg viewBox="0 0 192 192">
<g class="shape1">
<rect x="24" y="24" width="144" height="144" />
<text x="96" y="91">I LOVE</text>
<text x="96" y="109" class="em">clipping</text>
</g>
</svg>
</div>
</div>
</div>
<div class="note">clip-path: circle(25% at 25% 25%)</div>
<div class="row">
<div class="cell"> <span>HTML</span>
<div class="container">
<p class="shape2">
I LOVE<br><em>clipping</em>
</p>
</div>
</div>
<div class="cell"> <span>SVG</span>
<div class="container viewbox">
<svg viewBox="0 0 192 192">
<g class="shape2">
<rect x="24" y="24" width="144" height="144" />
<text x="96" y="91">I LOVE</text>
<text x="96" y="109" class="em">clipping</text>
</g>
</svg>
</div>
</div>
</div>
<div class="note">clip-path: fill-box circle(25% at 25% 25%)</div>
<div class="row">
<div class="cell"> <span>HTML</span>
<div class="container">
<p class="shape3">
I LOVE<br><em>clipping</em>
</p>
</div>
</div>
<div class="cell"> <span>SVG</span>
<div class="container viewbox">
<svg viewBox="0 0 192 192">
<g class="shape3">
<rect x="24" y="24" width="144" height="144" />
<text x="96" y="91">I LOVE</text>
<text x="96" y="109" class="em">clipping</text>
</g>
</svg>
</div>
</div>
</div>
<div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div>
<div class="row">
<div class="cell"> <span>HTML</span>
<div class="container">
<p class="shape4">
I LOVE<br><em>clipping</em>
</p>
</div>
</div>
<div class="cell"> <span>SVG</span>
<div class="container viewbox">
<svg viewBox="0 0 192 192">
<g class="shape4">
<rect x="24" y="24" width="144" height="144" />
<text x="96" y="91">I LOVE</text>
<text x="96" y="109" class="em">clipping</text>
</g>
</svg>
</div>
</div>
</div>
<div class="note">clip-path: view-box circle(25% at 25% 25%)</div>
<div class="row">
<div class="cell"> <span>HTML</span>
<div class="container">
<p class="shape5">
I LOVE<br><em>clipping</em>
</p>
</div>
</div>
<div class="cell"> <span>SVG</span>
<div class="container viewbox">
<svg viewBox="0 0 192 192">
<g class="shape5">
<rect x="24" y="24" width="144" height="144" />
<text x="96" y="91">I LOVE</text>
<text x="96" y="109" class="em">clipping</text>
</g>
</svg>
</div>
</div>
</div>
<div class="note">clip-path: margin-box circle(25% at 25% 25%)</div>
<div class="row">
<div class="cell"> <span>HTML</span>
<div class="container">
<p class="shape6">
I LOVE<br><em>clipping</em>
</p>
</div>
</div>
<div class="cell"> <span>SVG</span>
<div class="container viewbox">
<svg viewBox="0 0 192 192">
<g class="shape6">
<rect x="24" y="24" width="144" height="144" />
<text x="96" y="91">I LOVE</text>
<text x="96" y="109" class="em">clipping</text>
</g>
</svg>
</div>
</div>
</div>
<div class="note">clip-path: border-box circle(25% at 25% 25%)</div>
<div class="row">
<div class="cell"> <span>HTML</span>
<div class="container">
<p class="shape7">
I LOVE<br><em>clipping</em>
</p>
</div>
</div>
<div class="cell"> <span>SVG</span>
<div class="container viewbox">
<svg viewBox="0 0 192 192">
<g class="shape7">
<rect x="24" y="24" width="144" height="144" />
<text x="96" y="91">I LOVE</text>
<text x="96" y="109" class="em">clipping</text>
</g>
</svg>
</div>
</div>
</div>
<div class="note">clip-path: padding-box circle(25% at 25% 25%)</div>
<div class="row">
<div class="cell"> <span>HTML</span>
<div class="container">
<p class="shape8">
I LOVE<br><em>clipping</em>
</p>
</div>
</div>
<div class="cell"> <span>SVG</span>
<div class="container viewbox">
<svg viewBox="0 0 192 192">
<g class="shape8">
<rect x="24" y="24" width="144" height="144" />
<text x="96" y="91">I LOVE</text>
<text x="96" y="109" class="em">clipping</text>
</g>
</svg>
</div>
</div>
</div>
<div class="note">clip-path: content-box circle(25% at 25% 25%)</div>
<div class="row">
<div class="cell"> <span>HTML</span>
<div class="container">
<p class="shape9">
I LOVE<br><em>clipping</em>
</p>
</div>
</div>
<div class="cell"> <span>SVG</span>
<div class="container viewbox">
<svg viewBox="0 0 192 192">
<g class="shape9">
<rect x="24" y="24" width="144" height="144" />
<text x="96" y="91">I LOVE</text>
<text x="96" y="109" class="em">clipping</text>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
mlk
html,body {
height: 100%;
box-sizing: border-box;
background: #EEE;
}
.grid {
width: 100%;
height: 100%;
display: flex;
font: 1em monospace;
}
.row {
display: flex;
flex: 1 auto;
flex-direction: row;
flex-wrap: wrap;
}
.col {
display: flex;
flex: 1 auto;
flex-direction: column;
}
.cell {
margin: .5em;
padding: .5em;
background-color: #FFF;
overflow: hidden;
text-align: center;
flex: 1;
}
.note {
background: #fff3d4;
padding: 1em;
margin: .5em .5em 0;
font: .8em sans-serif;
text-align: left;
white-space: nowrap;
}
.note + .row .cell {
margin-top: 0;
}
.container {
display: inline-block;
border: 1px dotted grey;
position:relative;
}
.container:before {
content: 'margin';
position: absolute;
top: 2px;
left: 2px;
font: italic .6em sans-serif;
}
.viewbox {
box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset;
}
.container.viewbox:after {
content: 'viewbox';
position: absolute;
left: 1.1rem;
top: 1.1rem;
font: italic .6em sans-serif;
}
.cell span {
display: block;
margin-bottom: .5em;
}
p {
font-family: sans-serif;
background: #000;
color: pink;
margin: 2em;
padding: 3em 1em;
border: 1em solid pink;
width: 6em;
}
.none { clip-path: none; }
.svg { clip-path: url(#myPath); }
.shape1 { clip-path: circle(25%); }
.shape2 { clip-path: circle(25% at 25% 25%); }
.shape3 { clip-path: fill-box circle(25% at 25% 25%); }
.shape4 { clip-path: stroke-box circle(25% at 25% 25%); }
.shape5 { clip-path: view-box circle(25% at 25% 25%); }
.shape6 { clip-path: margin-box circle(25% at 25% 25%); }
.shape7 { clip-path: border-box circle(25% at 25% 25%); }
.shape8 { clip-path: padding-box circle(25% at 25% 25%); }
.shape9 { clip-path: content-box circle(25% at 25% 25%); }
.defs {
width: 0;
height: 0;
margin: 0;
}
pre { margin-bottom: 0; }
svg {
margin: 1em;
font-family: sans-serif;
width: 192px;
height: 192px;
}
svg rect {
stroke: pink;
stroke-width: 16px;
}
svg text {
fill: pink;
text-anchor: middle;
}
svg text.em {
font-style: italic;
}
| Начальное значение | 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);
}
JavaScript
var clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", function (evt) {
document.getElementById("clipped").style.clipPath = evt.target.value;
});
Результат
Спецификации
| Спецификация | Статус | Комментарий |
|---|---|---|
| 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,