Примеры использования маски
Немного теории плюс примеры и можно сформулировать простые правила, которые будут помогать в освоении и практическом применении масок.
Можно представить маску в виде 2D объекта, например лист любого материала, который расположен между нашими глазами и объектом наблюдения. В листе будут вырезаться отверстия, форма которых задаются элементами svg между тегами <mask>
- Если маска полностью непрозрачна
fill="black" мы ничего не увидим.
<style>
.container {
width:50%;
height:50%;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 800" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;" >
<defs>
<mask id="msk1">
<g fill="black">
<!-- Left eye -->
<circle cx="400" cy="350" r="90" />
<!-- Right eye -->
<circle cx="200" cy="350" r="90" />
</g>
</mask>
</defs>
<image xlink:href="https://i.stack.imgur.com/WHYc7.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>
</div>
- Маска имеет форму двух окружностей, которые полностью прозрачны,-
fill="white"
Видим после применения маски, вырезанные части объекта, как они есть на оригинальном изображении.
<style>
.container {
width:50%;
height:50%;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 800" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;" >
<defs>
<mask id="msk1">
<g fill="white">
<!-- Left eye -->
<circle cx="400" cy="350" r="90" />
<!-- Right eye -->
<circle cx="200" cy="350" r="90" />
</g>
</mask>
</defs>
<image xlink:href="https://i.stack.imgur.com/WHYc7.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>
</div>
- Цвет заполнения маски находится между чёрным и белым цветом, то есть прозрачность маски будет между
0 и 1
На примере часть маски для левого глаза fill="gray" для правого fill="red"
<style>
.container {
width:50%;
height:50%;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 800" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;" >
<defs>
<mask id="msk1">
<g >
<!-- Left eye -->
<circle cx="400" cy="350" r="90" fill="gray" />
<!-- Right eye -->
<circle cx="200" cy="350" r="90" fill="red" />
</g>
</mask>
</defs>
<image xlink:href="https://i.stack.imgur.com/WHYc7.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>
</div>
Обработка фона вне маски
Для этой цели в теги <mask> добавляется прямоугольник занимающий всё пространство маскируемого объекта
<rect width="100%" height="100%" fill="white" />
Принцип тот же,- для фона вне маски, если fill="white" этот участок останется неизменным. В итоге фон как есть, а зона действия маски зависит от прозрачности, то есть от выбора цвета заливки. Для маски,- это глаза fill="black" становятся непрозрачными.
<style>
.container {
width:50%;
height:50%;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 800" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;" >
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="white" />
<g fill="black">
<!-- Left eye -->
<circle cx="400" cy="350" r="90" />
<!-- Right eye -->
<circle cx="200" cy="350" r="90" />
</g>
</mask>
</defs>
<image xlink:href="https://i.stack.imgur.com/WHYc7.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>
</div>
Теперь фон непрозрачный fill="black" маска fill="white"
В этой комбинации маска работает, как clipPath
<style>
.container {
width:50%;
height:50%;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 800" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;" >
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="black" />
<g fill="white">
<!-- Left eye -->
<circle cx="400" cy="350" r="90" />
<!-- Right eye -->
<circle cx="200" cy="350" r="90" />
</g>
</mask>
</defs>
<image xlink:href="https://i.stack.imgur.com/WHYc7.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>
</div>
Фон полупрозрачный fill="red" маска прозрачна fill="white"
<style>
.container {
width:50%;
height:50%;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 800" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="red" />
<g fill="white">
<!-- Left eye -->
<circle cx="400" cy="350" r="90" />
<!-- Right eye -->
<circle cx="200" cy="350" r="90" />
</g>
</mask>
</defs>
<image xlink:href="https://i.stack.imgur.com/WHYc7.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>
</div>
