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>

一切看起来好像都没问题，但是图形没有显示出来。当我使用谷歌浏览器的检查工具时，我可以看到svg和rect元素，但谷歌的提示信息显示它们的大小为[0 x 0]。

有人有什么想法吗？

- grep

---

你尝试使用createElementNS了吗？（https://developer.mozilla.org/en/DOM/document.createElementNS）要查看一些示例，请访问http://www.kevlindev.com/tutorials/basics/shapes/js_dom/index.htm。 - Prusse

把它写成答案，你就有了勾号！谢谢 - grep

Answer 1

你尝试使用createElementNS了吗？ (developer.mozilla.org/en/DOM/document.createElementNS)

如果需要示例，请查看http://www.kevlindev.com/tutorials/basics/shapes/js_dom/index.htm。

- Prusse

---

尝试使用形状示例之一。我将代码块插入到window.onload中，但没有出现任何形状。 - MiddleKay

你使用的是哪个浏览器？你能创建一个 fiddle 来展示问题吗？http://jsfiddle.net/ - Prusse

很抱歉检查这个示例代码（fiddle）花费了这么长时间。SVG 元素需要放在 SVG 文档内才能正确呈现（另外，您的 fiddle 需要使用“no wrap <...>”规则才能正常工作。请查看http://jsfiddle.net/w9gEx/1/）。 - Prusse