无法在 Angular 7 中的 SVG 上触发鼠标事件

Question

我正在开发一个以交互式地图为中心的 Angular 应用程序，该地图已作为 SVG 图像提供。地图的某些区域会有热点，我可以单击这些热点来触发某些事件，例如当我单击位置标记时放大某个部分。

但是，没有鼠标事件起作用。我可以在 TypeScript 中更改 SVG 的属性（例如，更改 SVG 视图框以进行平移和缩放，或者在事件发生时以红色突出显示标签）但我无法在 SVG 本身内触发任何点击、滚动、悬停等事件.

到目前为止，我已经尝试过：

• 向 SVG 添加角度事件属性，这显然不是有效的 XML，因此浏览器无法解析它以进行渲染，并且；

• 通过它的 ID（我可以）查找元素，然后将一个匿名onclick函数附加到它 - 但它永远不会被触发

SVG 通过object标签包含在内。

<!--map.component.html-->

<object id="svg-object" #svgObject type="image/svg+xml" data="../../../assets/img/map_large.svg"></object>

在 SVG 加载后的组件中，我执行以下操作但没有任何反应。它甚至没有进入该功能。

// map.component.ts

this.svgDocument = this.svgObject.nativeElement.contentDocument.documentElement;

let el = this.svgDocument.getElementById("zoomToThis");

// this never gets triggered

el.addEventListener("click", function(event)

    {

        event.currentTarget.style.opacity = "1";

    }

);

然而，这工作得很好。所以很明显访问文档元素不是问题。

// map.component.ts

this.svgDocument = this.svgObject.nativeElement.contentDocument.documentElement;

let el = this.svgDocument.getElementById("zoomToThis");

el.style.opacity = "1";

我怎样才能解决这个问题？我正在考虑将其全部撕掉并在 iFrame 中使用 vanilla JavaScript，但我被告知领导拒绝这样做。鉴于地图的庞大规模，我们也拒绝将其内联。

Answer 1

即使在办公时间之外，我也为此绞尽脑汁，我发现了一些有效的方法。感觉很脏，但它有效。首先，我得到对象标签的内容窗口，而不是内容文档。// map.component.tslet cw = this.svgObject.nativeElement.contentWindow;内容窗口的作用类似于 iFrame。为了让点击事件在 SVG 内工作，我可以将一个函数注入到内容窗口中。// map.component.tscw.nameOfMyFunction = (event) => { /* do something */ }然后，在 SVG 本身内部，我可以向元素添加点击处理程序（通过直接编辑 XML 或在 Inkskape 等软件中）。<!--map_large.svg--><rect onclick="nameOfMyFunction(event)" />我单击矩形，该函数按预期触发。

Answer 2

可以使用render方法来捕获事件 &nbsp;this.renderer.listen(document.querySelector('svg'),'click',(evt)=>{console.log(evt)});导入 renderer2 并在您的组件构造函数中启动它private renderer: Renderer2