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


 

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

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

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

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

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

<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>, который содержит элемент rect. Этот прямоугольник позволит отрисовать верхнюю половину черного холста. Обратите внимание, что элемент clipPath обычно помещается в раздел defs.

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

ScreenshotLive sample

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

Маска

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

<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) маски, и мы видим красно-зеленый градиент: 

ScreenshotLive sample

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

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

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

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

<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>

ScreenshotLive sample

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

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

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

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

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