Allow SVG edition using jsdom + SVG.js

Basic info:

• Node.js version: 11.13.0
• jsdom version: 15.1.1

The Problem

To easily edit SVG on node using jsdom + SVG.js, we need jsdom to implement (at least) this methods:

• SVGGraphicsElement::getBBox()
• SVGSVGElement::createSVGRect()
• SVGSVGElement::createSVGPoint()
• SVGSVGElement::createSVGMatrix()

Minimal reproduction case (pure jsdom)

const { JSDOM } = require('jsdom')

dom = new JSDOM(`
<svg id="test" xmlns="http://www.w3.org/2000/svg" width="50px" height="50px">
<path d="M0,0 L50,50"/>
</svg>
`)
elSVG = dom.window.document.body.children[0]

// All this will fail:
elSVG.firstElementChild.getBBox()
elSVG.createSVGRect()
elSVG.createSVGPoint()
elSVG.createSVGMatrix()

Minimal reproduction case (With svg.js)

This is going to crash by the same reason, but it is a (near to) real use case.

const { JSDOM } = require('jsdom')
const svgFactory = require('svg.js')

dom = new JSDOM(`
<svg id="test" xmlns="http://www.w3.org/2000/svg" width="50px" height="50px">
<path d="M0,0 L50,50"/>
</svg>
`)

SVG = svgFactory(dom.window)
elSVG = dom.window.document.body.children[0]
draw = SVG(elSVG)

line = SVG.select('#test path').members[0]
line.move(10, 20)

How does similar code behave in browsers?

It simply retun values from getBBox(), createSVGRect(), createSVGPoint(), createSVGMatrix() as expected.

[TimothyGu]

https://twitter.com/slicknet/status/782274190451671040

[jcubic]

Good news that there is some progress, if you want to look at my code (mixed ES5 and ES6 I don’t like to use ES6 classes if I don’t need to)

https://gist.github.com/jcubic/2a31f3d123f2044ceeffa70d7831fc75

I was not sure how to throw DOM exception the w3c spec only say about error code.