Архивы с меткой: mask

Примеры анимации масок SVG

Опубликовано автором
Ответить

Анимация масок реализуется за счет анимации элементов svg, входящих в состав маски. Составными частями маски могут быть любые базовые фигуры SVG: Line, circle, ellipse, polyline, polygon, rect, а также path любой формы.

Маска может работать в нескольких режимах

1. Обрезать всё, что находится вне зоны действия маски, то есть этот режим подобен действию clipPath
2. Вырезать, например в изображении отверстие в форме маски, показывая тем самым всё, что находится ниже изображения.
В примере ниже в состав маски входят прямоугольник и окружность. Изменяя радиус окружности, можно менять размер круглой маски, увеличивая или уменьшая размер круглого отверстия сквозь, которое становится видимым нижнее градиентные полосы.

Продолжить чтение →

Mask SVG, маски SVG

Опубликовано автором
Ответить


У маски только один обязательный параметр, её ID, с помощью которого она ассоциируется с объектом, к которому применена. Остальные параметры x, y, width и height опциональны.
Маски обладают широкими возможностями для изменения, украшения и анимирования растровыx и векторныx изображений.
Во первых они могут обрезать изображения, по заданной форме как clipPath
Но в отличии от clipPath маска не только вырезает, но и есть у неё возможность оформить оставшуюся часть изображения с помощью непрозрачности. Как в примере выше.
В теги mask можно добавить один или несколько элементов svg: line, circle, ellipse, rect, polyline, polygon, path
Присваивая этим элементам различные цвета заполнения можно получать участки изображения с разной непрозрачностью.
Продолжить чтение →