Тип маски
Классы mask-type-* задают mask-type у элемента <mask> в SVG. Берите
mask-type-alpha, когда маска нарисована прозрачностью и цвет её фигур не
должен влиять на результат.
Пример
Типы
Маска из двух непрозрачных кругов — белого и чёрного — поверх прямоугольника fill-primary.
Классы
| Класс | CSS | Значения |
|---|---|---|
mask-type-luminance |
mask-type: luminance |
— |
mask-type-alpha |
mask-type: alpha |
— |
Условия (что это): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Какой тип выбрать
| Класс | Содержимое видно там, где маска |
|---|---|
mask-type-luminance |
светлая; чёрный скрывает, белый показывает — значение по умолчанию |
mask-type-alpha |
непрозрачна, независимо от цвета |
Класс ставится на сам элемент <mask>:
<svg viewBox="0 0 240 120">
<mask id="shape" class="mask-type-alpha">
<circle cx="120" cy="60" r="45" fill="black"></circle>
</mask>
<rect class="fill-primary" width="240" height="120" mask="url(#shape)"></rect>
</svg>
Ограничения
- Классы действуют только на элемент
<mask>в SVG. Для маски, заданной черезmask-imageв CSS, режим задают классы режима маски;mask-alphaиmask-luminanceна элементе с маской главнее типа маски. - У семейства нет префиксов ширины экрана и состояния.