SVG Interpretation Doesn't Retrieve Transform Matrix in Node.js Environments

[jonobr1]

This example doesn't work in node.js environments because the transform matrix transform='matrix(1,0,0,1,20,15)' is ignored based on Two.Utils.applySvgAttributes current logic. Two.js needs to parse the string matrix, translate, scale, rotate, etc. (based on this spec) and then extract the right values to a Two.Matrix instance.

var fs = require('fs');
var path = require('path');
var Two = require('two.js');
var jsdom = require('jsdom');
const { JSDOM } = jsdom;
var { createCanvas, Image } = require('canvas');

var width = 800;
var height = 600;
var canvas = createCanvas(width, height);

Two.Utils.shim(canvas, Image);

var two = new Two({
  domElement: canvas
});

var dom = new JSDOM(`
<?xml version='1.0' encoding='UTF-8'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40pt' height='40pt' viewBox='0 0 40 40' version='1.1'>
  <g id='surface1'>
    <path style='fill-rule:nonzero;fill:rgb(220,18,59);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(220,18,59);stroke-opacity:1;stroke-miterlimit:4;' d='M -10 0 L 0 -10 L 10 0 L 0 10 Z M -10 0 ' transform='matrix(1,0,0,1,20,15)'/>
  </g>
</svg>
`);

var svg = two.interpret(dom.window.document.querySelector('svg'));
two.add(svg);

two.update();

var time = Date.now();

var settings = { compressionLevel: 3, filters: canvas.PNG_FILTER_NONE };
fs.writeFileSync(path.resolve(__dirname, './images/rectangle.png'), canvas.toBuffer('image/png', settings));
console.log('Finished rendering. Time took: ', Date.now() - time);

process.exit();