SVG.js 不能在 chrome 中运行，Firefox 运行良好答案

【问题标题】：SVG.js not working in chrome, Firefox works wellSVG.js 不能在 chrome 中运行，Firefox 运行良好
【发布时间】：2022-07-21 23:42:52
【问题描述】：

我似乎能够在 Firefox 中完成任何我想做的事情。但Chrome似乎大部分都坏了。例如 svgObj.findOne("#myNode").on("click", function) 在 Firefox 中有效，但在 Chrome 中无效，& 不会失败，只是什么都不做。在 chrome/firefox 我可以document.body.querySelector("#myNode").addEventListener... .

.animate 是同一个故事。在 Firefox 中，这按预期工作。在 Chrome 中它不会失败，但它也不会做任何事情。

似乎这个包不适用于 chrome。有没有其他人有这种经验？有什么想法/建议可以让它发挥作用吗？

我认为我的代码不会对答案有太大影响，但它是：

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();

【问题讨论】：

标签： svg.js

【解决方案1】：

如果您使用 DomParser 从字符串创建 dom 对象，避免使用 innerHTML，这个问题就会消失。在这方面，Chrome 似乎不像 Firefox 那样动态。最终你可以让 Chrome 显示内容，但它没有正确加载到 DOM 中。

更改此行可以解决问题：

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

【讨论】：