即使在使用命名空間之後，也無法附加到SVG

Question

我試圖使用JavaScript將circle附加到svg元素。當我創建這個圈子時，我發現你應該使用createElementNS而不是createElement。我這樣做了，圓圈確實出現在HTML中，但它仍然沒有出現在頁面中。這裏是我的代碼：

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.

Answer 1

使用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>