Создание и добавление SVG-элементов с JavaScript в HTML

Быстрый ответ

Для динамического создания SVG-элементов, такими как прямоугольник, следует использовать метод document.createElementNS(), указывая пространство имен SVG. Вот образец кода:

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var rect = document.createElementNS(svg.namespaceURI, "rect");
rect.setAttribute("x", "10");
rect.setAttribute("y", "10");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "red");
svg.appendChild(rect);
document.body.appendChild(svg);

Такой скрипт генерирует и добавляет красный прямоугольник в SVG-объект на HTML-странице.

Как избежать подводных камней при работе с SVG

В процессе динамической разработки SVG следует учитывать такие моменты, как:

• Правильное пространство имен: без корректного namespaceURI SVG не будет отображаться. Правильное значение — "http://www.w3.org/2000/svg".
• Пространство имен для атрибутов: Атрибуты типа xlink:href требуют своего пространства имен. Где это необходимо, используйте setAttributeNS().
• Учёт регистра: SVG чувствителен к регистру, поэтому важно следить за правильностью написания атрибутов, таких как viewBox.
• Обработчики событий: Для создания интерактивности добавляйте их после формирования SVG-элементов.

Сделайте интерактивным!

Чтобы улучшить взаимодействие с пользователем, можно добавить обработчики событий к SVG-элементам:

rect.addEventListener('click', function() {
    alert('Действительно ли стоило кликнуть на этот прямоугольник?');
 });

Теперь SVG будет реагировать на клики, делая взаимодействие с пользователем более интересным.

Визуализация

Процесс создания SVG-объектов следует рассматривать как процесс эволюции:

🏞️ HTML-страница     🌱 SVG-основа    🌷 Визуализированный SVG

Сформируйте основу для SVG:

let seed = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
seed.setAttribute('cx', '25');
seed.setAttribute('cy', '25');
seed.setAttribute('r', '20');
seed.setAttribute('fill', 'blue');

И она превратится в удачно визуализированный SVG-объект:

🏞️ HTML-страница -> 🌱 Основа для SVG ('<circle>') -> 🌷 Превосходно визуализированный SVG-объект (🔵)

Создание сложных SVG-образов

Для создания сложных SVG-диаграмм комбинируйте различные формы. Группируйте их при помощи (<g>), чтобы диаграмма была более управляемой:

let group = document.createElementNS(svg.namespaceURI, 'g');

let circle = document.createElementNS(svg.namespaceURI, 'circle');
circle.setAttribute('cx', '40');
circle.setAttribute('cy', '40');
circle.setAttribute('r', '30');
group.appendChild(circle);

svg.appendChild(group);

Подробнее об этом расскажет наш спикер на видео

Стилизация SVG-атрибутов

Добавьте стили для улучшения визуального восприятия. Используйте атрибуты stroke и fill, применяя свойство .style или метод .setAttribute():

rect.style.stroke = "black";
rect.style.strokeWidth = "2";
// Или через setAttribute
rect.setAttribute("stroke", "black");
rect.setAttribute("stroke-width", "2");

Доступность SVG-элементов

При разработке доступных SVG обратите внимание на важность атрибутов role="img" и aria-labelledby, а также на теги описаний, упрощающие работу скринридеров.

Полезные материалы

1. Document: createElementNS() method – Web APIs | MDN — полное руководство по созданию SVG с помощью JavaScript и метода createElementNS.
2. Использование SVG с CSS и HTML5 | CSS-Tricks — всё от основ до продвинутого уровня.
3. SVG в HTML — курс по интеграции SVG в HTML для начинающих.
4. Практическое руководство по использованию SVG в вебе — рекомендации по эффективному применению SVG в сети.
5. Изменение документа — обзор от Javascript.info по работе с DOM, включая создание динамического контента.
6. Чуть-чуть подождите... — обсуждение вопросов динамического создания SVG элементов в JavaScript на Stack Overflow.
7. Raphaël—JavaScript библиотека — знакомство с библиотекой Raphaël для работы с векторной графикой в интернете.