SVG как альтернатива ImageMap

Раньше веб-мастера использовали 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://travelalberta.com/">
    <path d="M351.37 342.397c-55.34 1.268-49.206 ..."
    />
  </a>
  <a xlink:href="http://www.hellobc.com/">
    <path d="M6.4 5.558l81.71 19.885c9.12 1.846 ..."
    />
  </a>
  <a xlink:href="http://www.saskatoon.ca/">
    <path d="M513.978 327.287c-.278-.14-4.05.45-8.38 ..."
    />
  </a>
</svg>

Результат. Подведите указатель мыши к разным участкам карты и кликайте по ним для перехода на другую страницу.

Источник: the new code – Using SVG as an Alternative To Imagemaps

Вернуться в раздел SVG

Дополнительные материалы

Сборник карт на Википедии

Коллеция карт на Гитхабе

Реклама