JavaScript 和 SVG

Question

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

我使用 document.createElement 在 javascript 中创建 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 .