SVG.js not working in chrome, Firefox works well

Question

I seem to be able to accomplish anything I want in Firefox. But Chrome seems to be mostly broken. For instance svgObj.findOne("#myNode").on("click", function) works in Firefox, but in Chrome it doesn't work, & doesn't fail just doesn't do anything. In chrome/firefox I can document.body.querySelector("#myNode").addEventListener... .

.animate is kind of the same story. In Firefox this works as expected. In Chrome it doesn't fail, but also it doesn't do anything.

Seemingly this package doesn't work with chrome. Has anyone else had this experience? Any ideas/suggestions to get it to work?

I don't think that my code will have much bearing on the answer but here it is:

index.ts:

import { SVG, extend as SVGextend, Element as SVGElement } from "@svgdotjs/svg.js"

function init() {
   let svgObj = SVG(s);
   var s = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   s.innerHTML = ".... pasted from inkscape ....";
   document.body.appendChild(s);
   let svgObj = SVG(s);
   svgObj.viewbox(40,250,750,2000);
   svgObj.findOne("#StartButton").on("click", startIntro.bind(this,svgObj));
}
function(svgObj) {
   //does not fire in chrome
   console.log("firefox only");
}
init();

Answer 1

This problem goes away if you use the DomParser to create the dom object from the string avoiding innerHTML. Chrome doesn't seem to be as dynamic as Firefox in this regard. Ultimately you can get Chrome to display the content but it's not loaded in the DOM correctly.

Changing this line resolves the problems:

var s = new DOMParser.parseFromString("... pasted from inkscape....")