Как добавить к
Есть <svg>, к нему нужно добавить <line>. Пытаюсь добавить через JavaScript - не получается. Добавляю точно такой же <line> напрямую через HTML - все получается.
HTML:
<svg id="svg"></svg>
JavaScript:
let nLine = document.createElement("line");
nLine.setAttribute("x1", "6.25vh");
nLine.setAttribute("y1", "0vh");
nLine.setAttribute("x2", "6.25vh");
nLine.setAttribute("y2", "80vh");
document.getElementById("svg").appendChild(nLine);
Ответы (1 шт):
Автор решения: UModeL
→ Ссылка
- Так как SVG это по сути XML-документ, то элементы для него создаются в другом пространстве имён.
- Чтобы видеть объект, у него должны быть заданы ширина и цвет обводки (stroke) через атрибуты или CSS-стили.
let nLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
nLine.setAttribute("x1", "6.25vh");
nLine.setAttribute("y1", "0vh");
nLine.setAttribute("x2", "6.25vh");
nLine.setAttribute("y2", "80vh");
nLine.setAttribute("stroke-width", "1px");
nLine.setAttribute("stroke", "red");
document.getElementById("svg").appendChild(nLine);<svg id="svg"></svg>- Также неплохо было бы указывать для тега
<svg>размеры и/или атрибутviewBox.