Implement SVG basic shape classes

[marinho]

This is a follow up of #2126, as it wasn't properly formatted.

Basic info:

• Node.js version: v8.9.0
• jsdom version: 11.6.1

Minimal reproduction case

const { JSDOM } = require("jsdom");

const options = {
};
const dom = new JSDOM(`
  <svg width="100%" height="100%" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">

    <path d="M 100 100 L 300 100 L 200 300 z" fill="orange" stroke="black" stroke-width="3" />
    <rect x="10" y="10" width="100" height="100"/>
    <circle cx="100" cy="100" r="100"/>
    <ellipse cx="60" cy="60" rx="50" ry="25"/>
    <line x1="20" y1="100" x2="100" y2="20" stroke-width="2" stroke="black"/>
    <polyline points="0,40 40,40 40,80 80" fill="white" stroke="#D07735" stroke-width="6" />
    <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>

  </svg>
`, options);

console.log(dom.window.document.firstChild.querySelector('path'));

Current output:

> SVGElement {}

How it should be:

> SVGPathElement {}

That's because the following SVG basic geometry shapes are not implemented:

• SVGCircleElement
• SVGEllipseElement
• SVGLineElement
• SVGPathElement
• SVGPolygonElement
• SVGPolylineElement
• SVGRectElement

How does similar code behave in browsers?

They work as expected in SVG specs, by showing their respective graphic shapes.

I'm going to file a pull request as a follow up to this issue.

[Undistraction]

Just ran into this. It isn't just shapes that are missing, but also others like SVGAnimatedLength.

[felixfbecker]

I personally need SVGAElement (equivalent of HTMLAnchorElement) because I want to test code that needs to handle both SVGAElement and HTMLAnchorElement

[ulfaslak]

Bump on this. None of the workarounds people suggest in this and related issues work for me. I'm writing test (using Jest) for some code that does SVG processing. Until common SVG geometries such as SVGPathElement, SVGPolygonElement, etc. are supported in JSDOM, I don't know how to do this.

Case in point: At some point my code, a SVGPolygonElement object has its points attribute read:

for (let point of (element as SVGPolygonElement).points) {
    coords.push([point.x, point.y]);
}

Using JSDOM, this throws the error TypeError: element.points is not iterable, because it parses element as an HTMLElement object, so elements.points === undefined (which is not iterable, duh).

I understand that JSDOM cannot be a total browser clone, but I think a lot of people would LOOOOVE support for these geometries so one could write unit tests for SVG processing code, using popular frameworks like Jest.

[palvol]

another bump.
have exactly the same issue with points on SVGPolylineElement and it's really unfortunate as i'm testing library that get points from svg and it looks like there is no way to properly test it 🤷‍♀️

[liangyiliang]

Same here

[rsn55]

Another bump.

When rendering <foreignObject/> and <g/> I get console.errors in my tests that don't cause failures but do clog up the results and make it hard to see the actual failures. I worked around this by mocking the implementation of the global console with jest and explicitly ignoring errors like <foreignObject> is unrecognized in this browser.