Раньше веб-мастера использовали ImageMap для создания изображения, которое умело распознавать события над различными частями картинки. Но создание сложного участка карты было трудоёмким. В SVG с самого начала уже заложена возможность определения отдельного фрагмента картины с помощью path. Поэтому появилась возможность создания очень сложных фигур. Самый распространённый случай - это карты стран, схемы и диаграммы.
При этом SVG лишена многих недостатков ImageMap - не теряет чёткости при изменении размеров, малый размер файла, легко настраивается.
Возьмём кусочек вымышленной карты, разделённую на три части.
Каждый фрагмент представляет собой отдельную провинцию страны. Сделаем её ссылкой с помощью стандартного тега <a>, но с якорем xlink:href.
В стилях определим эффекты при наведении указателя мыши на определённый фрагмент карты - участок карты позеленеет (path:hover). Цвет самой карты определён в path через свойство fill.
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 525 365" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet">
<style type="text/css">
path {
transition: .6s fill;
fill: #D3D3D3;
}
path:hover {
fill: #22aa22;
}
</style>
<a xlink:href="http://alexanderklimov.ru/">
<path d="M351.37 342.397c-55.34 1.268-49.206 ..."
/>
</a>
<a xlink:href="http://developer.alexanderklimov.ru/">
<path d="M6.4 5.558l81.71 19.885c9.12 1.846 ..."
/>
</a>
<a xlink:href="http://user.alexanderklimov.ru/">
<path d="M513.978 327.287c-.278-.14-4.05.45-8.38 ..."
/>
</a>
</svg>
Результат. Подведите указатель мыши к разным участкам карты и кликайте по ним для перехода на другую страницу.
Вернуться в раздел SVG