Пара примеров, показывающих как сделать элемент svg полезным, например для создания интерактивной маски.
Рассмотрим следующий HTML код:
|
1 2 3 4 5 6 7 8 9 |
<svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 1000 1000"> <polygon points="100,100 150,500 500,500" fill="none" onclick="MYFUNC()"> </polygon> </svg> |
Здесь SVG настроен как «отзывчивый» объект, имеющий логические размеры 1000×1000пикс. Не важно какого размера обрамляющий контейнер, svg будет растянут и спроецирован на него, создавая своеобразную маску для родительского слоя.
Этого эффекта помогают добиться следующие компоновка и стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="svg-wrapper"> <svg ...></svg> </div> <style> .svg-wrapper { position: relative; } svg { position: absolute; left: 0; top: 0; } </style> |
Элемент polygon уже реагирует на событие onclick, вызывается функция MYFUNC(), но пользователь визуально не видит, что элемент активен и с ним можно взаимодействовать.
Давайте добавим затемнение области при наведении мыши.
|
1 2 3 4 5 6 7 8 9 |
polygon { fill: rgba(0,0,0,0.001); cursor: pointer; } polygon:hover { fill: rgba(0,0,0,0.5); transition: 0.5s fill; } |
В начальном состоянии приходится идти на небольшую хитрость и задавать цвет с высоким уровнем прозрачности (здесь 0.1%), т.к. иначе полигон не реагирует на нужные события. Анимация затенения достигается CSS свойством transition.