Mask SVG, маски SVG

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


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

Белый цвет fill=”white” преобразует маску в полностью непрозрачную область. Другими словами, часть изображения ограниченная, допустим кругом, как бы вырезает из всего изображения этот круг с оригинальным цветом исходного изображения. (Первый пример с овалом в начале статьи)

Чёрный цвет fill=”black” вырезает из исходного изображения область (отверстие) сквозь которую виден фон, либо другое изображение, которое расположено под ним.
Промежуточные цвета между белым и чёрным цветом в элементах маски придают изображению разную степень непрозрачности

Рассмотрим более подробно пример в начале статьи

Ко всему изображению применён красный цвет маски, что делает его полупрозрачным
<rect width=”100%” height=”100%” fill=”red” />
К эллипсу применен белый цвет маски, поэтому на этом участке цвет остается неизменным от оригинального изображения
<g fill=”white” >

2.Теперь фон в маске окрасим в белый цвет
<rect width=”100%” height=”100%” fill=”white” />


А эллипсы в маске, которые окружают глаза окрасим в чёрный цвет, что сделает маску на этом участке полностью прозрачной и будет виден фон, который расположен под изображением
<ellipse fill=”black”

3.Теперь фон в маске окрасим в цвет близкий к чёрному
<rect width=”100%” height=”100%” fill=”#111111″ />


Поэтому фон изображения едва заметен.
Глаза (эллипсы) окрасим в белый цвет <ellipse fill=”white”
поэтому на этих участках сохранено оригинальное изображение глаз.

4.Ко всему изображению применён красный цвет маски, что делает его полупрозрачным
<rect width=”100%” height=”100%” fill=”red” />

К эллипсу применен белый цвет маски, поэтому на этом участке цвет остается без изменения от оригинального изображения
Добавляется широкая строка к эллипсу, что дает дополнительные возможности оформления в цветовой гамме. Строка разбивается на сегменты командой
stroke-dasharray=”140.2 23″

5.Повторяет вариант 4, но добавлена анимация широкой строки маски
<animate attributeName=”stroke-dashoffset” begin=”svg1.click” dur=”10s” values=”1632;0″ repeatCount=”1″ />

Анимация начинается после клика по изображению.



Следующая ⇛  Примеры анимации масок SVG

Добавить комментарий