Интерактивные SVG-карты

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 33
Автор
Рек. время прохождения 3 минуты
Упражнений 9
Комментарии 0
Тренажер HTML
Интерактивные карты — мощный инструмент для визуализации данных. С помощью SVG и HTML вы можете создавать не просто статичные картинки, а карты, регионы которых реагируют на действия пользователя: меняют цвет при наведении, показывают подсказки и даже являются ссылками. В этих заданиях вы пройдете путь от создания простого SVG-контейнера до добавления интерактивных элементов. Вам не понадобится JavaScript, вся магия будет происходить благодаря правильной HTML-разметке и заранее подготовленным CSS-стилям. Вы научитесь структурировать SVG-код, стилизовать отдельные части карты, группировать элементы и делать их кликабельными. Это отличная практика для понимания того, как HTML и CSS могут работать вместе для создания сложных и функциональных веб-компонентов.
Список тем

Основа для карты: тег SVG

id: 37821_svg-map-01

Создайте контейнер для будущей векторной карты. Внутри этого контейнера уже есть несколько регионов в виде тегов <path>, но без родительского тега SVG они не будут отображаться как единое графическое изображение.

CSS
.map-container {
  width: 100%;
  max-width: 350px;
  border: 1px solid #ccc;
}

.region {
  fill: #e0e0e0;
  stroke: #666;
  stroke-width: 1px;
  transition: fill 0.3s ease;
}
HTML
<input1 viewBox="0 0 300 200" class="map-container">
  <!-- Регион Альфа -->
  <path class="region region-alpha" d="M50,10 L150,10 L140,90 L60,90 Z"></path>
  <!-- Регион Бета -->
  <path class="region region-beta" d="M160,10 L250,10 L240,90 L170,90 Z"></path>
  <!-- Регион Гамма -->
  <path class="region region-gamma" d="M55,100 L245,100 L200,180 L100,180 Z"></path>
</input1>
Чтобы определить область для SVG-графики, используется тег `<svg>`. Вам нужно обернуть существующий код в этот тег, используя его как открывающий и закрывающий теги.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Раскрашиваем регион

id: 37821_svg-map-02

Карта выглядит однообразно. Давайте выделим "Регион Альфа", применив к нему специальный CSS-класс, который уже подготовлен в стилях. Найдите нужный регион и добавьте ему атрибут для присвоения класса `active`.

CSS
.map-container {
  width: 100%;
  max-width: 350px;
  border: 1px solid #ccc;
}

.region {
  fill: #e0e0e0;
  stroke: #666;
  stroke-width: 1px;
}

.active {
  fill: #ffc107;
}
HTML
<svg viewBox="0 0 300 200" class="map-container">
  <!-- Регион Альфа -->
  <path input1="region region-alpha active" d="M50,10 L150,10 L140,90 L60,90 Z"></path>
  <!-- Регион Бета -->
  <path class="region region-beta" d="M160,10 L250,10 L240,90 L170,90 Z"></path>
  <!-- Регион Гамма -->
  <path class="region region-gamma" d="M55,100 L245,100 L200,180 L100,180 Z"></path>
</svg>
Чтобы применить CSS-стиль к элементу, используется атрибут `class`. Вам нужно добавить этот атрибут к первому тегу `<path>`. Существующие классы удалять не нужно, просто добавьте новый через пробел.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Всплывающая подсказка для региона

id: 37821_svg-map-03

Сделаем карту более информативной. При наведении курсора на "Регион Бета" должна появляться стандартная браузерная подсказка с его названием. Добавьте для этого необходимый дочерний элемент внутрь тега `<path>`.

CSS
.map-container {
  width: 100%;
  max-width: 350px;
  border: 1px solid #ccc;
}

.region {
  fill: #e0e0e0;
  stroke: #666;
  stroke-width: 1px;
  transition: fill 0.3s ease;
  cursor: pointer;
}

.region:hover {
  fill: #00bcd4;
}
HTML
<svg viewBox="0 0 300 200" class="map-container">
  <path class="region region-alpha" d="M50,10 L150,10 L140,90 L60,90 Z"></path>
  <path class="region region-beta" d="M160,10 L250,10 L240,90 L170,90 Z">
    <input1>Это регион Бета</input1>
  </path>
  <path class="region region-gamma" d="M55,100 L245,100 L200,180 L100,180 Z"></path>
</svg>
В SVG для создания всплывающих подсказок используется тег `<title>`. Его нужно разместить внутри элемента, для которого создается подсказка, в данном случае — внутри второго `<path>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Превращаем регион в ссылку

id: 37821_svg-map-04

Сделайте "Регион Гамма" кликабельным. При нажатии на него пользователь должен переходить на другую страницу. Для этого оберните соответствующий `<path>` в тег, который используется для создания ссылок.

CSS
.map-container {
  width: 100%;
  max-width: 350px;
  border: 1px solid #ccc;
}
.region {
  fill: #e0e0e0;
  stroke: #666;
  stroke-width: 1px;
  transition: fill 0.3s ease;
  cursor: pointer;
}
.region:hover {
  fill: #00bcd4;
}
HTML
<svg viewBox="0 0 300 200" class="map-container">
  <path class="region region-alpha" d="M50,10 L150,10 L140,90 L60,90 Z"></path>
  <path class="region region-beta" d="M160,10 L250,10 L240,90 L170,90 Z">
    <title>Это регион Бета</title>
  </path>
  
  <input1 href="https://naytikurs.ru" target="_blank">
    <path class="region region-gamma" d="M55,100 L245,100 L200,180 L100,180 Z"></path>
  </input1>
</svg>
Чтобы сделать элемент ссылкой, его нужно обернуть в тег `<a>`. Этот тег должен содержать атрибут `href` с адресом назначения.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Указываем адрес для ссылки

id: 37821_svg-map-05

Вы сделали регион ссылкой, но не указали, куда она должна вести. Добавьте в тег `<a>` атрибут, который отвечает за URL-адрес. Нужный адрес уже подставлен в значение.

CSS
.map-container {
  width: 100%;
  max-width: 350px;
  border: 1px solid #ccc;
}
.region {
  fill: #e0e0e0;
  stroke: #666;
  stroke-width: 1px;
  transition: fill 0.3s ease;
  cursor: pointer;
}
.region:hover {
  fill: #00bcd4;
}
HTML
<svg viewBox="0 0 300 200" class="map-container">
  <path class="region region-alpha" d="M50,10 L150,10 L140,90 L60,90 Z"></path>
  <path class="region region-beta" d="M160,10 L250,10 L240,90 L170,90 Z">
    <title>Это регион Бета</title>
  </path>
  
  <a input1="https://naytikurs.ru" target="_blank">
    <path class="region region-gamma" d="M55,100 L245,100 L200,180 L100,180 Z"></path>
  </a>
</svg>
Адрес назначения для ссылки указывается в атрибуте `href`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Группировка регионов

id: 37821_svg-map-06

Объединим регионы "Альфа" и "Бета" в одну логическую группу "Северные территории". Это позволит в будущем применять к ним общие стили или трансформации. Оберните два соответствующих тега `<path>` в группирующий тег.

CSS
.map-container {
  width: 100%;
  max-width: 350px;
  border: 1px solid #ccc;
}
.region {
  fill: #e0e0e0;
  stroke: #666;
  stroke-width: 1px;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
/* Стиль для всей группы при наведении */
.northern-territories:hover .region {
  opacity: 0.6;
}
HTML
<svg viewBox="0 0 300 200" class="map-container">
  <input1 class="northern-territories">
    <!-- Регион Альфа -->
    <path class="region region-alpha" d="M50,10 L150,10 L140,90 L60,90 Z"></path>
    <!-- Регион Бета -->
    <path class="region region-beta" d="M160,10 L250,10 L240,90 L170,90 Z"></path>
  </input1>
  
  <a href="https://naytikurs.ru" target="_blank">
    <path class="region region-gamma" d="M55,100 L245,100 L200,180 L100,180 Z"></path>
  </a>
</svg>
Для группировки элементов в SVG используется тег `<g>`. Он работает как контейнер для других SVG-элементов.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление текстовых меток

id: 37821_svg-map-07

Карта почти готова, но не хватает подписей. Добавьте текстовую метку для "Региона Гамма". Используйте тег для создания текста и укажите его координаты `x` и `y`, чтобы разместить его по центру региона.

CSS
.map-container {
  width: 100%;
  max-width: 350px;
  border: 1px solid #ccc;
}
.region {
  fill: #e0e0e0;
  stroke: #666;
  stroke-width: 1px;
  cursor: pointer;
}
.label {
  font-family: Arial, sans-serif;
  font-size: 16px;
  fill: #333;
  text-anchor: middle;
  pointer-events: none; /* Чтобы текст не мешал кликам по региону */
}
HTML
<svg viewBox="0 0 300 200" class="map-container">
  <g>
    <path class="region" d="M50,10 L150,10 L140,90 L60,90 Z"></path>
    <path class="region" d="M160,10 L250,10 L240,90 L170,90 Z"></path>
  </g>
  <path class="region region-gamma" d="M55,100 L245,100 L200,180 L100,180 Z"></path>
  
  <!-- Метка для Региона Гамма -->
  <input1 input2="150" input3="145" class="label">Гамма</input1>
</svg>
Для добавления текста в SVG используется тег `<text>`. Его положение задается атрибутами `x` (горизонтальная координата) и `y` (вертикальная координата).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Управление обводкой

id: 37821_svg-map-08

Сделаем обводку регионов более выразительной при наведении. В CSS уже есть нужный стиль. Ваша задача — добавить в HTML к "Региону Альфа" атрибуты, которые изначально задают цвет и толщину его обводки.

CSS
.map-container {
  width: 100%;
  max-width: 350px;
  border: 1px solid #ccc;
}
.region {
  fill: #e0e0e0;
  transition: all 0.3s ease;
  cursor: pointer;
}
.region:hover {
  fill: #00bcd4;
  stroke: #00796b;
  stroke-width: 2px;
}
HTML
<svg viewBox="0 0 300 200" class="map-container">
    <!-- Регион Альфа с измененной обводкой -->
    <path class="region region-alpha" 
          d="M50,10 L150,10 L140,90 L60,90 Z" 
          input1="#ff5722" 
          input2="3"></path>

    <path class="region region-beta" d="M160,10 L250,10 L240,90 L170,90 Z"></path>
</svg>
Для управления обводкой в SVG используются атрибуты-презентации. Цвет обводки задается атрибутом `stroke`, а ее толщина — `stroke-width`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Клонирование фигуры с помощью <use>

id: 37821_svg-map-09

Представьте, что нам нужен еще один такой же регион, как "Альфа", но в другом месте. Чтобы не копировать сложный код <path>, можно его переиспользовать. Сначала задайте `id` для фигуры, а затем создайте ее копию с помощью тега <use>.

CSS
.map-container {
  width: 100%;
  max-width: 350px;
  border: 1px solid #ccc;
}
.region {
  fill: #e0e0e0;
  stroke: #666;
  stroke-width: 1px;
}
HTML
<svg viewBox="0 0 300 200" class="map-container">
  <defs>
    <!-- Определяем фигуру один раз -->
    <path input1="alpha-shape" class="region" d="M10,10 L110,10 L100,90 L20,90 Z"></path>
  </defs>

  <!-- Используем фигуру -->
  <input2 input3="#alpha-shape"></input2>

  <!-- Используем ее еще раз со смещением и другим цветом -->
  <use href="#alpha-shape" x="120" fill="#a5d6a7"></use>
</svg>
Чтобы сделать элемент доступным для повторного использования, ему нужно задать уникальный идентификатор с помощью атрибута `id`. Затем тег `<use>` может сослаться на этот `id` через атрибут `href`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру