I have been accessing the SVGMatrix prototype to use its power for matrix transformations. These transformations are not necessarily related to any SVG element

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

Essentially I want to be able to create a svgMatrix as in line two without first relying on a svg element in the DOM as in line 1.

I have been accessing the SVGMatrix prototype to use its power for matrix transformations. These transformations are not necessarily related to any SVG element

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

Essentially I want to be able to create a svgMatrix as in line two without first relying on a svg element in the DOM as in line 1.

• javascript
• dom
• svg

• @Sirko that method creates and unknowelement not an SVG I am not sure what this means in practice but that created element will not have method createSVGMatrix – Peter Saxton Commented May 29, 2014 at 15:18
• @Sirko as example try in a page with an svg a = document.createElement('svg'); then a.constructor.name – Peter Saxton Commented May 29, 2014 at 15:19
• @RobertLongson do you mean root element as in body or html. if so how do I use that to access the svg namespace – Peter Saxton Commented May 29, 2014 at 15:19
• Thank you I was just reading about createElementNS on MDN – Peter Saxton Commented May 29, 2014 at 15:22

2 Answers 2

How about

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

Just use new DOMMatrix(). It's the same thing.

Even though DOMMatrix !== SVGMatrix,

they share the same constructor DOMMatrix.constructor === SVGMatrix.constructor.

lib.dom.d.ts also equates the two:

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