SVG元素出現在DOM中,但不可見

[英]SVG elements appearing in DOM, but not visible


I am trying to place a circle svg onto my page using javascript.

我正在嘗試使用javascript將圓圈svg放到我的頁面上。

This is in my html:

這是我的html:

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

And this is my javascript:

這是我的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)

I see the circle show up in the DOM, which I checked using Chrome dev tools Elements inspector. But the circle is not visible. Any idea what I'm doing wrong?

我看到圈子出現在DOM中,我使用Chrome開發工具元素檢查器進行了檢查。但圓圈不可見。知道我做錯了什么嗎?

1 个解决方案

#1


2  

I realized that I need specify the "namespace" that the circle element is using. So the line with createElement becomes:

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

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

It worked!


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/08/29/729db98ed9d6b5c613740f8abdd0daf1.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com