DOMにSVG要素が表示されていますが、表示されません。

Question

javascriptを使用してページにサークルsvgを配置しようとしています。

これは私のhtmlである：

<svg 
     id="container" 
     width="120" 
     height="220" 
     viewPort="0 0 120 120" 
     version="1.1" 
     xmlns="http://www.w3.org/2000/svg"> 
</svg> 

をそして、これは私のjavascriptです：私は円が、私はクロームのdevのツール要素インスペクタを使用してチェックDOMに現れる参照

const container = document.getElementById('container') 

const spot = document.createElement('circle') 
spot.setAttribute('cx', 200) 
spot.setAttribute('cy', 200) 
spot.setAttribute('r', 20) 

container.appendChild(spot) 

。しかし、サークルは表示されません。私が間違っていることは何か考えていますか？

Answer 1

円要素が使用している「名前空間」を指定する必要があることに気付きました。したがって、createElementの行は次のようになります。

const spot = document.createElementNS('http://www.w3.org/2000/svg', 'circle')