javascript - 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 开发工具 Elements 检查器对其进行了检查。但是圆圈是不可见的。知道我做错了什么吗？

Answer 1

我意识到我需要指定圆形元素正在使用的“命名空间”。所以带有 createElement 的行变成:

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

成功了!