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

我意識到我需要指定circle元素正在使用的“命名空間”。 因此，帶有createElement的行變為：

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

有效！