@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>
.
@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 элементов.