Атрибут data-* тега <svg>

Описание

Атрибуты data-* позволяют хранить пользовательские данные непосредственно в элементе <svg>. Эти атрибуты не влияют на отображение, но могут быть использованы JavaScript или CSS для дополнительной функциональности.

Пример использования:
<svg data-chart-type="bar" data-interactive="true" width="400" height="300"> <rect data-value="35" x="50" y="100" width="40" height="200" fill="#3498db"/> </svg>

Синтаксис и правила именования:

Правило Пример Некорректный пример
Префикс data- data-id chart-id
Формат имени data-chart-type data-ChartType
Регистр символов data-interactive data-Interactive

Основные сценарии использования:

  • Хранение метаданных для графиков и диаграмм
  • Конфигурация интерактивных элементов
  • Передача данных в JavaScript-обработчики
  • Связь SVG-элементов с внешними данными

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

  • Используйте осмысленные имена атрибутов
  • Храните только простые данные (строки, числа)
  • Для сложных структур используйте JSON в одном атрибуте
  • Избегайте хранения чувствительной информации

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

  • Значения всегда преобразуются в строки
  • Не предназначены для стилизации (используйте классы)
  • Медленный доступ при большом количестве элементов

Примечание: Для сложных SVG-приложений рассмотрите использование dataset API в JavaScript для удобного доступа к данным.