Allow SVG edition using jsdom + SVG.js

aurium commented 5 years ago

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.

Sayan751 commented 4 years ago

Is there any plan for this?

TimothyGu commented 4 years ago

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

jcubic commented 4 years ago

Any plans to implement this? I was trying to run Raphael (as asked in DmitryBaranovskiy/raphael#1074) but got error that createSVGMatrix is not a function.

Maybe I can help with implementation, Raphael have better API then D3 I would like to use it in Node.js.

jcubic commented 4 years ago

I've just created basic SVGMatrix class (function constructor) and createSVGMatrix function, if you're interested I can share the code. I'm not sure how to integrate my code with jsdom, I'm not sure where to put it.

I've checked the code and it seems that this should be ES6 class it would not be that hard to convert.

TimothyGu commented 4 years ago

There are some planned improvements here: https://github.com/jsdom/jsdom/pull/2926. This implements DOMRect/SVGRect, but not any of the other classes mentioned here yet. DOMMatrix/SVGMatrix and DOMPoint/SVGPoint will probably come after that pull request gets merged.

Responding to the OP: SVGGraphicsElement::getBBox() will probably be more difficult to implement than the rest, because it requires some rendering support in the form of the SVG bounding box algorithm.

Sorry for the slow progress here, but SVG stuff tends to be pretty underspecified. When implementing DOMRect, I ended up fixing both spec bugs (https://github.com/w3c/fxtf-drafts/pull/395) and browser bugs (1, 2).

jcubic commented 4 years ago

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.

TimothyGu commented 4 years ago

Thanks for the work. If you are interested in making this part of jsdom itself, here are two notes. If not, that's okay too. We'll get to it in due time.

Like actual web browser projects, we always implement the latest Editor's Draft, which for SVGMatrix would be here. (SVGMatrix and DOMMatrix have been merged into the same class in specs.)

Additionally, jsdom has a IDL translation layer that creates the bindings between our code and web code, that handles things like type conversion; see Architecture. So when we implement DOMMatrix we will have to do something like that too and move the actual implementation into a -impl.js file.