Thêm yếu tố SVG tới SVG hiện sử dụng DOM

Question

Tôi có một cấu trúc HTML tương tự như đoạn mã sau:

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

Tôi muốn để có thể thêm một số yếu tố để các SVG định nghĩa ở trên sử dụng javascript và DOM. Làm thế nào tôi sẽ đạt được điều đó? Tôi đã nghĩ đến việc

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

Tôi không phải là rất quen thuộc với việc sử dụng DOM, hoặc làm thế nào để tạo ra nguyên tố này được thông qua để appendChild vì vậy hãy giúp tôi ra với điều này hoặc có lẽ chỉ cho tôi những gì lựa chọn thay thế khác mà tôi phải giải quyết này vấn đề. Cảm ơn rất nhiều.

Answer 1

Nếu bạn muốn tạo một phần tử HTML, hãy sử dụng hàm document.createElement. SVG sử dụng không gian tên, đó là lý do tại sao bạn phải sử dụng chức năng 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); 

Mã này sẽ tạo ra một cái gì đó như thế này:

<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

Nếu bạn đang xử lý rất nhiều svg bằng JS, tôi khuyên bạn nên sử dụng d3.js. Bao gồm nó trên trang của bạn, và làm một cái gì đó như thế này:

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