Как добавить <line> к <svg> через javascript?
2 ответа
@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 элементов.