使用 DOM 将 SVG 元素添加到现有 SVG

Posted 2023-02-22

【中文标题】使用 DOM 将 SVG 元素添加到现有 SVG

【英文标题】：Add SVG element to existing SVG using DOM

【发布时间】：2013-05-05 12:41:56

【问题描述】：

我有一个类似于以下代码的 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 的元素，所以请帮我解决这个问题，或者向我展示我必须解决这个问题的其他替代方案。非常感谢。

【参考方案1】：

如果您经常使用 JS 处理 svg，我建议使用 d3.js。将其包含在您的页面中，然后执行以下操作：

d3.select("#svg1").append("circle");

【讨论】：

我想用纯 javascript 来做，没有外部库或函数

我支持使用 D3 的建议。如果你只是做一次性的，那么是的，用纯 JavaScript 编写它。但是，如果您使用 SVG 做了大量工作，那么切换到 d3.js 对您来说是一个巨大的帮助。它也是一个非常轻量级的库。它不仅仅是 SVG 的；它实际上将 DOM 转换为数据库。只是它让使用 SVG 变得轻而易举，因此它已成为一个事实上的 SVG 库。

【参考方案2】：

如果要创建 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

【讨论】：

我收到Uncaught TypeError: Cannot read property 'setAttribute' of null。

@Rvervuur​​t 嘿，你在用我的帖子做什么？ :D

@m93a 删除不必要的图像。如果您想享受图像的乐趣，请去论坛或聊天，这只会分散注意力:)

为什么不画？哦，是的，命名空间：每次都能吸引我。

应该注意的是，与人们的想法相反，您大多数使用newElement.setAttribute() 将属性设置为与newElement.setAttributeNS() 相对 - 至少在 Chrome 中。