Обрезка и маска
На первый взгляд, странно стирать то, что было только что нарисовано. Но когда вы попытаетесь создать полукруг в 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
.
При этом сам прямоугольник отрисован не будет. Вместо этого прямоугольник задаст область отрисовки. Так как прямоугольник перекрывает только верхнюю половину круга, нижняя половина круга исчезает:
Теперь мы получили полуокружность без необходимости использования элемента 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) маски, и мы видим красно-зелёный градиент:
Прозрачность 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>
В этом примере используется красный круг на голубом фоне. Жёлтый контур установлен на 50% непрозрачности, что приводит к эффекту двойного цвета.
Использование хорошо известных CSS техник
Одним из мощных инструментов является display: none
. Поэтому неудивительно, что было принято решение использовать это CSS свойство в SVG вместе с visibility
и clip
, как определено в CSS 2. Для восстановления значения по умолчанию ранее важно знать, что начальное значение для всех элементов SVG - inline
.