Создание SVG Polygon и ссылок произвольной формы.

Создание SVG Polygon и ссылок произвольной формы

Недавно понадобилось создать для сайта интерактивную карту, с кликабельными районами. Было ясно, что это делается с помощью SVG, но как?

В общем, вот небольшая инструкция по созданию ссылок произвольной формы для сайта. Результат работы.

Для создания SVG использовал Adobe Illustrator CC2015. В принципе, можно использовать любой векторный редактор, но в примере именно он.

  1. Открываем изображение.

Открываем изображение в редакторе.

2. Кликаем на «Монтажные области», выбираем «Подогнать по границам иллюстрации».

Настройка монтажной области.

3. Далее выбираем инструмент «Перо», и точками создаём нужную область на картинке. При этом последнюю точку замыкаем на первой.

Создание SVG Polygon и ссылок произвольной формы.

4. По умолчанию выделенная область заливается цветом. Если вам это мешает — отключаем. Для этого отключаем заливку в пунктах «Заливка» и «Обводка».

Отключаем заливку.

5. После того, как мы всё сделали, выбираем «Файл» — «Сохранить как…». Выбираем «SVG», ставим галочку «Адаптивный SVG», если надо.

6. Открываем сохранённый SVG-файл в редакторе. Видим код.

Код SVG.
На предыдущём шаге я не отключил заливку, поэтому сохранились стили. Fill — заливка, stroke — обводка.
Создание SVG polygon.
Тег «xml» брать не нужно.

7. Вставляем код на свою страничку и заворачиваем области в ссылки.

Не забываем подкорректировать путь к файлу тега «image». Удаляем ненужные стили полигонов (я оставил), заворачиваем каждую область в ссылку. Для этого просто оборачиваем каждую область в тег «a», но вместо «href» пишем «xlink:href».

8. Готово. Результат работы, как говорилось в начале статьи, можно посмотреть на этой странице.

comments powered by HyperComments

Автор

webbeaver

webbeaver

Верстаю, читаю, учусь