diff options
Diffstat (limited to 'files/ru/web/css/clip-path/index.html')
| -rw-r--r-- | files/ru/web/css/clip-path/index.html | 586 |
1 files changed, 586 insertions, 0 deletions
diff --git a/files/ru/web/css/clip-path/index.html b/files/ru/web/css/clip-path/index.html new file mode 100644 index 0000000000..c218eb1f00 --- /dev/null +++ b/files/ru/web/css/clip-path/index.html @@ -0,0 +1,586 @@ +--- +title: clip-path +slug: Web/CSS/clip-path +translation_of: Web/CSS/clip-path +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code><strong>clip-path</strong></code> создает ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (<code><a href="https://developer.mozilla.org/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/circle">circle()</a></code>).</p> + +<div class="note"> +<p><strong>Историческая справка:</strong> Свойство clip-path заменило устаревшее свойство {{cssxref("clip")}} .</p> +</div> + +<pre class="brush:css no-line-numbers">/* 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; +</pre> + +<div class="hidden" id="clip-path"> +<pre class="brush: html"><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> +&lt;svg&gt; + &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt; + &lt;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" /&gt; + &lt;/clipPath&gt; +&lt;/svg&gt;</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></pre> + +<p>mlk</p> + +<pre class="brush: css">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; +}</pre> +</div> + +<p>{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}</p> + +<p>{{cssinfo}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>Свойство <code>clip-path</code> определяется как одно или комбинация значений перечисленных ниже.</p> + +<h3 id="Значения">Значения</h3> + +<dl> + <dt><code>url()</code></dt> + <dd>Представляет URL ссылку на траекторию, ограничивающую элемент.</dd> + <dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt> + <dd>Функция {{cssxref("<basic-shape>")}}. Размер и положение области определяется значением <code><geometry-box></code>. Если геометрия не определена,<code>border-box</code> будет использоваться в качестве блока.</dd> + <dt><code><geometry-box></code></dt> + <dd>Если определен в комбинации с <code><basic-shape></code>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений: + <dl> + <dt><code>fill-box</code></dt> + <dd>Использует границы объекта в качестве базовой области.</dd> + <dt><code>stroke-box</code></dt> + <dd>Использует stroke bounding box в качестве базовой области.</dd> + <dt><code>view-box</code></dt> + <dd>Использует ближайший SVG viewport в качестве базового блока. Если отриут {{SVGAttr("viewBox")}} определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом <code>viewBox</code> и ширина и высота базового блока устанавливаются равными значениям атрибута <code>viewBox</code>.</dd> + <dt><code>margin-box</code></dt> + <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">margin box</a> в качестве базового блока.</dd> + <dt><code>border-box</code></dt> + <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">border box</a> в качестве базового блока.</dd> + <dt><code>padding-box</code></dt> + <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">padding box</a> в качестве базового блока.</dd> + <dt><code>content-box</code></dt> + <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">content box</a> в качестве базового блока.</dd> + </dl> + </dd> + <dt><code>none</code></dt> + <dd>Обрезанная область не создается.</dd> +</dl> + +<h3 id="Формальный_синтаксис.">Формальный синтаксис.</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: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); +}</pre> + +<h2 id="Живой_пример">Живой пример</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#clipped { + margin-bottom: 20px; + clip-path: url(#cross); +} +</pre> + +<div class="hidden"> +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath"); +clipPathSelect.addEventListener("change", function (evt) { + document.getElementById("clipped").style.clipPath = evt.target.value; +}); +</pre> +</div> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Live_sample", 230, 250)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td> + <td>{{Spec2('CSS Masks')}}</td> + <td>Extends its application to HTML elements.</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition (applies to SVG elements only).</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость">Совместимость</h2> + + + +<p>{{Compat("css.properties.clip-path")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute/clip-rule">clip-rule</a>, {{cssxref("mask")}}, {{cssxref("filter")}}</li> + <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">CSS Shapes, clipping and masking – and how to use them</a></li> + <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li> + <li>{{SVGAttr("clip-path")}} SVG attribute</li> +</ul> |