SVG元素出现在DOM中，但不可见

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：

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)

我看到圈子显示在DOM中，我使用Chrome开发工具元素检查器进行了检查。但圆圈不可见。知道我做错了吗？

Answer 1

我意识到我需要指定＆＃34;命名空间＆＃34;圆元素正在使用。因此，createElement的行变为：

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

有效！