使用 DOM 将 SVG 元素添加到现有 SVG
我有一个类似于以下代码的 HTML 结构：
<div id='intro'>
<svg>
//draw some svg elements
<svg>
</div>
我希望能够使用 javascript 和 DOM 向上面定义的 SVG 添加一些元素。我将如何做到这一点？我在想
var svg1=document.getElementById('intro').getElementsByTagName('svg');
svg1[0].appendChild(element);//element like <line>, <circle>
我不太熟悉使用 DOM，或者如何创建要传递给 appendChild 的元素，所以请帮我解决这个问题，或者向我展示我必须解决这个问题的其他替代方案。非常感谢。
如果要创建 HTML 元素，请使用 document.createElement 函数。 SVG 使用命名空间，这就是你必须使用 document.createElementNS 函数的原因。
var svg = document.getElementsByTagName('svg')[0]; //Get svg element
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespace
newElement.setAttribute("d","M 0 0 L 10 10"); //Set path's data
newElement.style.stroke = "#000"; //Set stroke colour
newElement.style.strokeWidth = "5px"; //Set stroke width
svg.appendChild(newElement);
此代码将产生如下内容：
<svg>
<path d="M 0 0 L 10 10" style="stroke: #000; stroke-width: 5px;" />
</svg>
createElement：https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
createElementNS：https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
如果您经常使用 JS 处理 svg，我建议使用 d3.js。将其包含在您的页面上，然后执行以下操作：
d3.select("#svg1").append("circle");
关注公众号
不定期副业成功案例分享
Uncaught TypeError: Cannot read property 'setAttribute' of null。newElement.setAttribute()将属性设置为与newElement.setAttributeNS()相对 - 至少在 Chrome 中是这样。