SVG.js - 如何在 Angular 中访问 shadow-root（打开）中的元素

Question

我目前正在从事一个Angular Elements 项目。在这个自定义组件中，我想使用SVG.js 3+。 但是由于我需要在我的组件中使用ViewEncapsulation.ShadowDom，所以我在初始化 SVG.js 时遇到了一些问题。

创建 SVG 和绘制矩形的标准过程如下：

this.draw = SVG().addTo("#SVGContainer").viewbox(0, 0, 300, 140);
this.draw.rect(100, 100).move(100, 50).fill('#f06')

这里的问题是.addTo("#SVGContainer") 只能找到不在shadow-root 中的元素。我已经用我的使用 shadow-root 的组件和不使用 shadow-root 的容器对其进行了测试。正如预期的那样，SVG.js 在没有 Shadow Dom 的 Angular 项目中工作，但在使用 shadow-root 的项目中没有工作。

我知道使用container.shadowRoot.querySelector(".test").innerHTML 可以访问阴影元素，但函数.addTo() 只允许我传递元素的id，因此没有传递dom 元素本身的选项。

由于ViewEncapsulation.ShadowDom 是我的新自定义 Web 组件的要求，我想知道是否可以将 shadow-dom 元素传递给 SVG.js，或者根本不可能。

Answer 1

解决了这个问题。就在我按照在他们的 Github 上创建问题的建议时，我遇到了这个Github Issue，其中一个用户说他们甚至支持 shadow dom 很好，你可以直接传递元素很好，但他们应该记录下来。

他说可以直接传递元素。所以我不得不再试一次，而且很好。有效。 我为我的容器创建了一个 ViewChild 参考，如下所示：

 @ViewChild('svgContainer') svgContainer: any;

并将其传递给.addTo()，如下所示：

this.draw = SVG().addTo(this.svgContainer.nativeElement).viewbox(0, 0, 300, 140);

所以有两件事为什么它第一次没有工作。首先，我没有找到他们说您可以传递元素本身的文档（如果有的话）。而且当我第一次尝试时，我忘记添加.nativeElement。