создание интерактивой карты svg

Но не всё так просто. Сразу можно заметить, что браузеры упорно не хотят масштабировать нашу карту, а если она не влезает, то показывают полосы прокрутки, вот так:

Подводные грабли

Второй правильный метод вставка SVG-кода прямо в HTML. Великолепно с точки зрения скриптинга, но поддержка браузерами . Кстати, заметьте, что SVG, вставленный в «либеральный» HTML, всё-таки остаётся «суровым» XML'ем. Так что кавычки и закрывающие теги обязательны.

Все браузеры, , его корректно «скушают» и покажут. И даже дадут нам с ним поработать. При одном условии: если веб-сервер отдаст его с MIME-типом image/svg+xml. Другой MIME-тип может очень смутить Google Chrome (но не Оперу, которая из тега твёрдо знает, что идёт за SVG и на провокации не поддаётся).

<object data="map.svg" type="image/svg+xml" id="imap" width="500" height="420"></object>

Мы же будем использовать HTML5 и воспользуемся самым простым, гуманным и стандартным способом:

Достаточно подробно этот процесс был освещён в хабратопике .

Вставляем SVG в HTML

Вот и обещанный мною CSS в действии. В принципе, этого уже достаточно. .

<style type="text/css">

Далее, в секции <defs> изображения помещаем до боли знакомое:

Поскольку, по моему замыслу, у областей карты не должно быть различного окраса, то вначале я вырезаю из интересующих меня тегов <path> стили fill и stroke, зато взамен даю этим элементам нужные мне class и id. Например, class=«area» для регионов и class=«city» для городов.

Я же, к примеру, возьму карту одной круглой страны ( )

Для начала нам нужна суть. То бишь сама карта. В случае, если гугл не помогает, то её можно нарисовать и самому, даром что в это сделать не трудно.

Самые нетерпеливые, могут сразу посмотреть , но я предлагаю читать обо всём по порядку.

Что же, и возьмём мы SVG. Почему? Да потому что с ним легко работать человеку, знакомому с HTML. SVG это векторный формат, основанный на XML. То есть у SVG-рисунка есть своя DOM, к различным элементам можно применять CSS-правила и управлять старым добрым JavaScript'ом.

Давайте создадим интерактивную карту. Чего-нибудь. Что значит интерактивную? Ну, она должна взаимодействовать с пользователем и с данными на веб-странице, на которой она расположена. Думаю, этого достаточно, чтобы считать её интерактивной.

HTML и SVG: создаём интерактивную карту

8 сентября 2011 в 11:55

HTML и SVG: создаём интерактивную карту / Хабрахабр