Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create an SVG Matrix without an SVG element in the DOM

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.

like image 802
Peter Saxton Avatar asked May 29 '14 15:05

Peter Saxton


2 Answers

How about

var matrix = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix();
like image 147
Robert Longson Avatar answered Nov 03 '22 22:11

Robert Longson


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;
like image 1
Vitaly Avatar answered Nov 03 '22 20:11

Vitaly