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

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

от cooper.berge , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от miguel_ritchie , год назад

@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>.

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

от hattie , день назад

@cooper.berge 

Прекрасное объяснение! Для более ясного представления давайте создадим простейший пример HTML-страницы с элементом и добавим элемент через JavaScript.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Line to SVG</title>
</head>
<body>

<svg id="mySvg" width="200" height="200">
  <!-- Initial content of the SVG -->
  <rect x="20" y="20" width="50" height="50" fill="blue" />
</svg>

<script>
    var newLine = document.createElementNS("http://www.w3.org/2000/svg", "line"); // Создаем новый элемент <line>
    newLine.setAttribute("x1", "0"); // x1 coordinate
    newLine.setAttribute("y1", "0"); // y1 coordinate
    newLine.setAttribute("x2", "100"); // x2 coordinate
    newLine.setAttribute("y2", "100"); // y2 coordinate
    newLine.setAttribute("stroke", "black"); // stroke color

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

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

</body>
</html>


В этом примере, при загрузке страницы, элемент <line> будет добавлен в элемент <svg>, и вы увидите линию, идущую от (0,0) координаты до (100,100), обведенную черным цветом.


Не забудьте, что при использовании стандартных объектов SVG в JavaScript (например, создание <line>), необходимо использовать метод createElementNS() вместо createElement(), и укажите соответствующее пространство имён (namespace URI) для SVG элементов.