Javascript 和 SVG

Question

我正在尝试使用 Javascript 动态创建 SVG 矢量，但遇到了一些问题。

我在 javascript 中使用 document.createElement 创建 svg 标记并将其附加到 div 容器中。然后我做同样的事情并创建一个rect 并将其作为子项添加到 svg id。

当我查看 DOM 时，我可以看到正在添加的元素，它们的属性是这样的：

<svg id="gdc_container" xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="300">
    <rect id="gdc_background" width="500" height="300" style="rgb(0,0,255)"></rect>
</svg>

一切看起来都很好，但是图形没有显示出来。当我使用 Chromes 检查器时，我可以看到 svg 和 rect 元素，但 chrome 工具提示显示它们的大小为 [ 0 x 0 ]。

有人有什么想法吗？

Answer 1

您是否尝试过使用createElementNS？ (developer.mozilla.org/en/DOM/document.createElementNS)

有关一些示例，请查看http://www.kevlindev.com/tutorials/basics/shapes/js_dom/index.htm。