如何使用 CreateSVGRect 在 SVG 文档中创建样式矩形？

Question

我正在尝试创建一个动态构造 SVG 文档，并希望避免实际编写<rect ...>等。创建 SVG 文档后，Chrome 显示它具有诸如 等方法createSVGRect()。createSVGPoint()前者似乎不带参数，并返回一个SVGRect仅具有属性x、y和width的对象height。

奇怪的是，很难找到有关这些方法的文档。MDN 指出：

在任何文档树之外创建一个 SVGRect 对象。该对象经过初始化，所有值都设置为 0 个用户单位。

它没有给出任何指示如何对其应用样式，或将其插入到 SVG DOM 中。

rect那么...如果这不是在 SVG 文档中创建元素的方法，那么什么才是呢？

（我需要支持IE9+）

Answer 1

document.createElementNS 创建一个 SVG 元素，因此要创建一个您需要编写的 rect 元素。

var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

上面创建的对象类型是 SVGRectElement。

SVGRect 对象不是 SVG 元素，它只是某些 SVG DOM 方法（例如 getBBox）传递或返回的内容。