如何在DOM中没有SVG元素的情况下创建SVG矩阵

Question

我一直在访问SVGMatrix原型以利用它的矩阵变换功能。这些变换不一定与任何SVG元素相关。

var svgElement = $('svg')[0];
var svgMatrix = svgElement.createSVGMatrix()
Object.create(svgMatrix.__proto__)

本质上，我希望能够像第二行那样创建一个svgMatrix，而不必像第一行那样先依赖于DOM中的svg元素。

- Peter Saxton

---

@Sirko 这个方法创建了一个未知元素而不是SVG。我不确定这在实践中意味着什么，但是创建的元素将没有createSVGMatrix方法。 - Peter Saxton

以@Sirko为例，在一个包含SVG的页面中尝试使用以下代码：a = document.createElement('svg'); 然后运行 a.constructor.name。 - Peter Saxton

@RobertLongson，您是指body或html作为根元素吗？如果是的话，我该如何使用它来访问SVG命名空间。 - Peter Saxton

谢谢，我刚在MDN上读到了关于createElementNS的内容。 - Peter Saxton

Answer 1

怎么样？

var matrix = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix();

- Robert Longson

Answer 2

只需使用 new DOMMatrix()。它和 SVGMatrix 是相同的。

尽管 DOMMatrix !== SVGMatrix，

它们共享相同的构造函数 DOMMatrix.constructor === SVGMatrix.constructor。

lib.dom.d.ts 也将两者等同起来：

type SVGMatrix = DOMMatrix;
declare var SVGMatrix: typeof DOMMatrix;

- Vitaly

---

不幸的是，这并不是真的。尽管相似，但它们并不相同。像SVG.getCTM/getScreenCTM这样的方法将不允许DOMMatrix，并作为结果抛出异常。 - Dom