Как реализовать отрисовку произвольных регионов фигуры?

Не знаю как подойти к его реализации. Хочу реализовать карту с которой можно будет взаимодействовать.(На web-странице.)
1) При наведении на область 1, взаимодействовать с областью 1.
2) При наведении на область 2, взаимодействовать с областью 2.
3) и т.д.

Поразмыслив, я пришел к тому, что карта будет состоять из набора векторных изображений подогнанных друг к другу. И тут встал вопрос: как подогнать элементы идеально друг к другу, без наплывов и зазоров?

Ответ

Могу предложить вариант. В богом забытом редакторе под названием DreamWeaver есть инструмент под названием Polygonal hotspot tool которым можно обвести картинку любой сложности. Далее сохранить это дело как web страницу, в результате чего получить html с координатами.
Далее просто берем эти самые координаты и переносим в svg
Всё!
100% для создания координат есть еще инструменты. Но алгоритм прост: берем картинку, инструмент, обводим, получаем координаты, перекидываем координаты в svg
var allStates = $("svg.us > *"); allStates.on("mouseover", function() { allStates.removeClass("on"); $(this).addClass("on"); }); .on { fill: pink; stroke: red; stroke-width: 2; } body { padding: 20px; }
Координаты в фотошопе: https://stackoverflow.com/a/13847787/6104996
Gimp: http://www.gimp.org/downloads/ с инструкцией http://docs.gimp.org/ru/plug-in-imagemap.html
UPD:
Программы для работы с векторной графикой с возможностью сохранить в svg и посмотреть координаты тоже:
CorelDRAW Adobe Illustrator CS2 Inkscape SVG-Edit