如何在 webkit 中使用 SVG* 对象？答案

【问题标题】：How to use SVG* Objects in webkit?如何在 webkit 中使用 SVG* 对象？
【发布时间】：2012-09-19 19:36:25
【问题描述】：

我正在尝试使用 JavaScript (Google Chrome v21.0) 中的 SVG。我了解如何使用基于 XML 命名空间的函数创建元素等。但是......我注意到有一大堆 Object SVG*，例如SVG 文档。但我找不到任何关于如何使用它们的参考。例如：

doc1 = new SVGDocument()

TypeError: Illegal constructor

而任何其他参数不足的构造函数返回：

TypeError: Not enough arguments

这是怎么回事？

【问题讨论】：

标签： javascript google-chrome svg webkit

【解决方案1】：

您将使用document.implementation.createDocument 创建一个 SVG 文档

所以对于 SVG 来说是

var dom = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', null);

或者

var dt = document.implementation.createDocumentType('svg:svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd');
var dom = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', dt);

如果您也想/需要设置文档类型。

【讨论】：

用第一个变体进行实验。工作正常。但是......与使用 createElementNS 等相比，看不到任何优势。
这是创建文档，而不是创建元素。这就是你在这个问题中似乎想要做的。
感谢罗伯特的澄清。创建文档后，我想用元素填充它 - 否则有什么意义？我继续对 SVG* 对象的“目的”感到困惑，如果您不能将它们用作构造函数等。即作为“普通”对象。
您可以调用 createElementNS 创建元素，调用 document.appendChild 将根节点添加到文档中。一旦你有了一个根节点，你就可以添加其他元素作为它的子节点。