Обрезка и маска
===============

* « Предыдущая статья
* Следующая статья »

На первый взгляд, странно стирать то, что было только что нарисовано. Но когда вы попытаетесь создать полукруг в SVG, то сразу столкнётесь со следующими свойствами.

**Обрезка (Clipping)** позволяет скрыть часть одного или нескольких элементов, используя другой. В этом случае нельзя настроить прозрачность элемента, это подход «все или ничего».

**Маска**, с другой стороны, позволяет создавать полупрозрачные эффекты (например, размытые края).

### Кадрирование изображений

Мы можем создать полукруг на основе окружности:


```html
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
  </defs>

  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>
```


По центру (100,100) нарисован круг с радиусом 100. Атрибут `clip-path` ссылается на элемент ``<clipPath>` (en-US)`, который содержит элемент `rect`. Этот прямоугольник позволит отрисовать верхнюю половину чёрного холста. Обратите внимание, что элемент `clipPath` обычно помещается в раздел `defs`.

При этом сам прямоугольник отрисован не будет. Вместо этого прямоугольник задаст область отрисовки. Так как прямоугольник перекрывает только верхнюю половину круга, нижняя половина круга исчезает:

| Screenshot | Live sample |
| --- | --- |
|  |  |

Теперь мы получили полуокружность без необходимости использования элемента `path`. При "обрезке" каждый путь внутри `clipPath` проверяется и оценивается вместе с его свойствами `stroke` и `transform`. Другими словами, всё что не находится в залитой области `clipPath` не будет отображено. Цвет, непрозрачность и т. д. не влияют на результат.

### Маска

Хороший пример использования маски - это градиент. В разных местах изображения с помощью масок можно добиться разной степени прозрачности.


```html
<svg
 width="200"
 height="200"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="Gradient">
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="Mask">
      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
    </mask>
  </defs>

  <rect x="0" y="0" width="200" height="200" fill="green" />
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>
```


Фактически на примере находятся два прямоугольника: зелёный на нижнем слое и красный на верхнем. У красного есть атрибут `mask`, который ссылается на элемент `mask`. Содержимое маски это элемент `rect`, заполненный градиентом, где прозрачная заливка перетекает в белую. В результате, пиксели красного прямоугольника наследуют прозрачность (alpha-value) маски, и мы видим красно-зелёный градиент:

| Screenshot | Live sample |
| --- | --- |
|  |  |

### Прозрачность `opacity`

Можно достаточно просто установить прозрачность для всего элемента, например используя атрибут `opacity`:


```xml
<rect x="0" y="0" width="100" height="100" opacity=".5" />
```


Вышеуказанный прямоугольник будет полупрозрачным. Для того, чтобы задать непрозрачность заливке или контуру мы можем использовать 2 отдельных атрибута `fill-opacity` и `stroke-opacity`. Обратите внимание, что заполнение контура будет перекрывать основную заливку. Следовательно, если установить прозрачность контура у элемента, который также имеет заливку, половина контура наложится на цвет заливки, а другая на фон:


```html
<svg
 width="200"
 height="200"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="200" height="200" fill="blue" />
  <circle
 cx="100"
 cy="100"
 r="50"
 stroke="yellow"
 stroke-width="40"
 stroke-opacity=".5"
 fill="red" />
</svg>
```


| Screenshot | Live sample |
| --- | --- |
|  |  |

В этом примере используется красный круг на голубом фоне. Жёлтый контур установлен на 50% непрозрачности, что приводит к эффекту двойного цвета.

Использование хорошо известных CSS техник
-----------------------------------------

Одним из мощных инструментов является `display: none`. Поэтому неудивительно, что было принято решение использовать это CSS свойство в SVG вместе с `visibility` и `clip`, как определено в CSS 2. Для восстановления значения по умолчанию ранее важно знать, что начальное значение для всех элементов SVG - `inline`.

* « Предыдущая статья
* Следующая статья »