Fix typeError when transforming use element

When I try to apply a transform to an element that has a use element as a child I get the following error:

Error: Getting bbox of element "g" is not possible: TypeError: node.getRootNode(...).getElementById is not a function

Switching getElementById to querySelector fixes the problem.

Here's an example (tested using node 14.16)

const { createSVGWindow } = require('svgdom');
const window = createSVGWindow();
const document = window.document;
const { SVG, registerWindow } = require('@svgdotjs/svg.js');

registerWindow(window, document);

const container = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve" xmlns:svgjs="http://svgjs.com/svgjs"></svg>`;

const testSVG = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="864px" height="864px" viewBox="0 0 864 864" enable-background="new 0 0 864 864" xml:space="preserve" xmlns:svgjs="http://svgjs.com/svgjs">
    <defs>
        <rect id="SVGID_1_" width="864" height="864"></rect>
    </defs>
    <clipPath id="SVGID_00000017492593800078829520000013984490219870406066_">
        <use xlink:href="#SVGID_1_" overflow="visible"></use>
    </clipPath>
    <polygon clip-path="url(#SVGID_00000017492593800078829520000013984490219870406066_)" fill="#1A2929" points="418.5,139.37 
        447.48,154.42 447.48,106.44 418.5,91.38"></polygon>
</svg>`;

const canvas = SVG(container);

const g = canvas.group();
g.add(testSVG);
g.transform({
    translateX: 1,
    translateY: 1
});

console.log(canvas.svg());

Thanks!

svgdotjs / svgdom

Fix typeError when transforming use element #87