SVG маска с кликабельным полигоном

Пара примеров, показывающих как сделать элемент svg полезным, например для создания интерактивной маски.

Рассмотрим следующий HTML код:

Здесь SVG настроен как «отзывчивый» объект, имеющий логические размеры 1000×1000пикс. Не важно какого размера обрамляющий контейнер, svg будет растянут и спроецирован на него, создавая своеобразную маску для родительского слоя.

Этого эффекта помогают добиться следующие компоновка и стили:

Элемент polygon уже реагирует на событие onclick, вызывается функция MYFUNC(), но пользователь визуально не видит, что элемент активен и с ним можно взаимодействовать.

Давайте добавим затемнение области при наведении мыши.

В начальном состоянии приходится идти на небольшую хитрость и задавать цвет с высоким уровнем прозрачности (здесь 0.1%), т.к. иначе полигон не реагирует на нужные события. Анимация затенения достигается CSS свойством transition.

Написать комментарий

Мало букафф? Читайте есчо !

SVG to CSS конвертер

Июнь 21, 2020 г.

Небольшая тулза по конвертации SVG картинок в CSS backgroung-image код. Рекомендую предварительно произвести оптимизацию изображения, убрать лишние/невидимые слои, маркеры программ редакторов SVG, лишние теги и т.п. Вы можете загрузить SVG в ...

Читать

Как заставить SVG картинку не держать пропорции

Октябрь 31, 2021 г.

У SVG изображения есть свойство preserveAspectRatio, которое управляет поддержанием пропорции. Этот атрибут так же используется в некоторых других контейнерах, например <image> и <symbol>. По умолчанию, значение его равно xMidYMid meet, ...

Читать

 

Комментарии к «SVG маска с кликабельным полигоном»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: