2016-08-22 57 views
0

我試圖使用JavaScript將circle附加到svg元素。當我創建這個圈子時,我發現你應該使用createElementNS而不是createElement。我這樣做了,圓圈確實出現在HTML中,但它仍然沒有出現在頁面中。這裏是我的代碼:即使在使用命名空間之後,也無法附加到SVG

let ns = 'http://www.w3.org/2000/svg'; 
let svg = document.getElementsByTagName('svg')[0]; 
let circle = document.createElementNS(ns, 'circle'); 

circle.setAttributeNS(ns, 'cx', 100); 
circle.setAttributeNS(ns, 'cy', 100); 
circle.setAttributeNS(ns, 'r', 10); 
circle.style.fill = 'red'; 

svg.appendChild(circle); 

輸出是:

<svg><circle cx="100" cy="100" r="10" style="fill: red;"></circle></svg> 

但有一種觀點是空的。看到Codepen here.

回答

3

使用createElementNS你不需要setAttributeNS創建圈子元素後,你應該使用setAttribute功能:

var ns = 'http://www.w3.org/2000/svg'; 
 
var svg = document.getElementsByTagName('svg')[0]; 
 
var circle = document.createElementNS(ns, 'circle'); 
 

 
circle.setAttribute('cx', 100); 
 
circle.setAttribute('cy', 100); 
 
circle.setAttribute('r', 10); 
 
circle.style.fill = 'red'; 
 

 
svg.appendChild(circle);
svg{ width: 100%; height: 100%; background-color: blue; }
<svg></svg>

相關問題