加入SVG元素，以現有的SVG使用DOM

Question

我有一個HTML結構類似於下面的代碼：

<div id='intro'> 
<svg> 
//draw some svg elements 
<svg> 
</div> 

我希望能夠添加到SVG一些元素上面使用JavaScript和DOM定義。我將如何實現這一目標？我在想

var svg1=document.getElementById('intro').getElementsByTagName('svg'); 
svg1[0].appendChild(element);//element like <line>, <circle> 

我不是很熟悉使用DOM，或者如何創建元素傳遞給使用appendChild所以請幫助我走出這或許證明我是有什麼其他辦法來解決這個問題。非常感謝。

Answer 1

。 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

Answer 2

如果你使用JS處理svg的很多，我推薦使用d3.js.它包含您的網頁上，而做這樣的事情：如果你想創建一個HTML元素，使用document.createElement功能

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