Недавно понадобилось создать для сайта интерактивную карту, с кликабельными районами. Было ясно, что это делается с помощью SVG, но как?
В общем, вот небольшая инструкция по созданию ссылок произвольной формы для сайта. Результат работы.
Для создания SVG использовал Adobe Illustrator CC2015. В принципе, можно использовать любой векторный редактор, но в примере именно он.
- Открываем изображение.
2. Кликаем на «Монтажные области», выбираем «Подогнать по границам иллюстрации».
3. Далее выбираем инструмент «Перо», и точками создаём нужную область на картинке. При этом последнюю точку замыкаем на первой.
4. По умолчанию выделенная область заливается цветом. Если вам это мешает — отключаем. Для этого отключаем заливку в пунктах «Заливка» и «Обводка».
5. После того, как мы всё сделали, выбираем «Файл» — «Сохранить как…». Выбираем «SVG», ставим галочку «Адаптивный SVG», если надо.
6. Открываем сохранённый SVG-файл в редакторе. Видим код.
7. Вставляем код на свою страничку и заворачиваем области в ссылки.
Не забываем подкорректировать путь к файлу тега «image». Удаляем ненужные стили полигонов (я оставил), заворачиваем каждую область в ссылку. Для этого просто оборачиваем каждую область в тег «a», но вместо «href» пишем «xlink:href».
8. Готово. Результат работы, как говорилось в начале статьи, можно посмотреть на этой странице.
