SVG- JavaScriptが正しくレンダリングされない

Question

私はそんなに試しました。何も動作しません。誰でも助けてくれますか？

ありがとうございました。以下は動作するはず

var svg = document.createElement("svg"); 
 
svg.setAttribute("width", "100%"); 
 
svg.setAttribute("height", "100%"); 
 

 
var line = document.createElement("line"); 
 
line.setAttribute("x1", "0"); 
 
line.setAttribute("y1", "0"); 
 
line.setAttribute("x2", "100"); 
 
line.setAttribute("y2", "100"); 
 
line.setAttribute("stroke", "black"); 
 
line.setAttribute("stroke-width", "4px"); 
 

 
svg.appendChild(line); 
 

 
document.body.appendChild(svg);

Answer 1

。要素を作成し、使用してスタイルを適用します。

• Document.createElementNS
• Element.setAttributeNS

これは、SVGようになり、それは形状が（それゆえ– 名前空間）の範囲内で作成されますインナーですHTMLドキュメントではなく、SVGの

var svgns = "http://www.w3.org/2000/svg"; 
 
var svg = document.createElementNS(svgns, "svg"); 
 
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink"); 
 
svg.setAttributeNS(null, 'width', '100%'); 
 
svg.setAttributeNS(null, 'height', '100%'); 
 

 
var line = document.createElementNS(svgns, "line"); 
 
line.setAttributeNS(null, 'x1', 0); 
 
line.setAttributeNS(null, 'y1', 0); 
 
line.setAttributeNS(null, 'x2', 100); 
 
line.setAttributeNS(null, 'y2', 100); 
 
line.setAttributeNS(null, 'stroke', 'black'); 
 
line.setAttributeNS(null, 'stroke-width', 4); 
 
svg.appendChild(line); 
 

 
document.body.appendChild(svg);

シンプル、まだ動作します：

var svgns = "http://www.w3.org/2000/svg"; 
 
var svg = document.createElementNS(svgns, "svg"); 
 
svg.setAttribute('width', '100%'); 
 
svg.setAttribute('height', '100%'); 
 

 
var line = document.createElementNS(svgns, "line"); 
 
line.setAttribute('x1', 0); 
 
line.setAttribute('y1', 0); 
 
line.setAttribute('x2', 100); 
 
line.setAttribute('y2', 100); 
 
line.setAttribute('stroke', 'black'); 
 
line.setAttribute('stroke-width', 4); 
 
svg.appendChild(line); 
 

 
document.body.appendChild(svg);