Атрибут id тега <svg>

Описание

Атрибут id задаёт уникальный идентификатор для элемента <svg>. Этот идентификатор используется для:

  • Связи SVG с CSS и JavaScript
  • Создания якорных ссылок внутри документа
  • Интерактивного управления графикой
Пример использования:
<svg id="main-chart" width="400" height="300" viewBox="0 0 400 300"> <circle id="data-point-1" cx="100" cy="150" r="10"/> </svg>

Синтаксис и правила:

Параметр Пример Описание
Уникальность id="chart1" Должен быть единственным в документе
Именование id="temperature-graph" Лучше использовать осмысленные имена
Чувствительность id="Chart" ≠ id="chart" Учитывается регистр символов

Пример использования в CSS и JavaScript:

<style> #interactive-map { border: 1px solid #ddd; transition: transform 0.3s; } #interactive-map:hover { transform: scale(1.02); } </style> <svg id="interactive-map" width="500" height="300"> <!-- SVG-содержимое --> </svg> <script> document.getElementById('interactive-map') .addEventListener('click', function() { console.log('SVG кликнуто'); }); </script>

Рекомендации:

  • Используйте kebab-case для имён (дефисы вместо пробелов)
  • Избегайте общих имён вроде "svg1", "image1"
  • Для стилизации предпочитайте классы, оставляя id для JavaScript
  • Уникальные id особенно важны для интерактивной графики

Ограничения:

  • Дублирование id вызывает ошибки валидации
  • Сложно изменять динамически (ломает существующие ссылки)
  • Нельзя использовать пробелы или спецсимволы (кроме дефиса и подчёркивания)

Примечание: Для сложных SVG-документов с множеством элементов создавайте систему именования id (например: "map-pin-1", "chart-axis-x").