SVGで円を描く

Question

SVGを使って円を描きたい。円の中心が配列しています。arr [i] [0] .xはx-centerで、arr [i] [0] .yはy-centerでarr [i] [0] .rは半径です。

私はこの

svg.appendChild(circle); 
     circle.cx.appendItem(arr[i][0].x); 
     circle.cy.appendItem(arr[i][0].y); 
     circle.r.appendItem(arr[i][0].r); 

のようにそれを試してみましたが、それは動作しません。どうすれば修正できますか？

Answer 1

サークル値を設定するにはsetAttributeを使用します。

var circle = document.getElementById("circle") 
     circle.setAttribute("cx", 60); 
     circle.setAttribute("cy", 70); 
     circle.setAttribute("r", 5); 
var svg = document.getElementById("svg1") 
svg.appendChild(circle); 

Answer 2

あなたがサークルを作成したいと仮定すると、あなたが作成/ SVG-オブジェクトを描画するためにcreateElementNSを使用する必要がありますし、あなたにもsetAttributeを使用する必要があります。

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); 
// it does not matter whether appendChild is put before or after setAttribute 
svg.appendChild(circle); 

circle.setAttribute("cx",100); 
circle.setAttribute("cy",100); 
circle.setAttribute("r",80); 

希望します。

Answer 3

これも動作例です。

var svgn = "http://www.w3.org/2000/svg"; 
 
var svg = document.getElementById('svg'); 
 
var circle = document.createElementNS(svgn, "circle"); 
 
circle.setAttributeNS(null, "cx", 25); 
 
circle.setAttributeNS(null, "cy", 25); 
 
circle.setAttributeNS(null, "r", 20); 
 
svg.appendChild(circle);

<svg id="svg"></svg>

Answer 4

SVG DOMは少し冗長ですが、あなたは、私は以下やったようelement.property.baseVal.valueを使用したい場合は、値を直接設定することができます。あなたが使用したハードコードされた数字の代わりに配列の値を差し込むことができます。多分 `のappendChild（円）`ら_END_

var svg = document.getElementById('svg'); 
 
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); 
 
circle.cx.baseVal.value = 25; 
 
circle.cy.baseVal.value = 25; 
 
circle.r.baseVal.value = 20; 
 
svg.appendChild(circle);

<svg id="svg"></svg>