Как добавить <line> к <svg> через javascript?

Пользователь

от cooper.berge , в категории: JavaScript , 6 месяцев назад

Как добавить <line> к <svg> через javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от miguel_ritchie , 6 месяцев назад

@cooper.berge 

Чтобы добавить <line> к <svg> через JavaScript, можно использовать методы DOM для создания и добавления элементов.


Пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// Создаем новый элемент 
var newLine = document.createElementNS("http://www.w3.org/2000/svg", "line");

// Задаем атрибуты элемента
newLine.setAttribute("x1", "0");
newLine.setAttribute("y1", "0");
newLine.setAttribute("x2", "100");
newLine.setAttribute("y2", "100");
newLine.setAttribute("stroke", "black");

// Получаем ссылку на 
var svg = document.getElementById("mySvg");

// Добавляем элемент  в 
svg.appendChild(newLine);


В этом примере кода создается новый элемент <line> с атрибутами x1, y1, x2, y2 и stroke. Затем получается ссылка на <svg> с помощью getElementById() и добавляется созданный элемент <line> с помощью appendChild(). Поменяйте "mySvg" на ID вашего <svg>.