Javascript SVG.js-如何访问Angular中阴影根（打开）中的元素

我目前正在做一个项目。在此自定义组件中，我要使用。 但是，由于我需要在我的组件中使用viewenclosuration.ShadowDom，因此在将SVG.js进行日化时，我面临一些问题

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

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

 @ViewChild('svgContainer') svgContainer: any;

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

这里的问题是.addToSVGContainer只能找到不在阴影根中的元素。我已经用使用shadowroot的组件和不使用shadowroot的容器对它进行了测试。正如所料，SVG.js在没有阴影Dom的Angular项目中工作，但在使用阴影根的项目中不工作

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

---

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

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

他说你可以直接传递元素。所以我不得不再试一次，而且很好。成功了。 我为容器创建了ViewChild引用，如下所示：

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

 @ViewChild('svgContainer') svgContainer: any;

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

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

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

 @ViewChild('svgContainer') svgContainer: any;

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

---

因此，有两件事是它第一次不起作用的原因。首先，我没有找到文档，如果他们说您可以传递元素本身。还有，当我第一次尝试添加.nativeElement时，我放弃了添加.nativeElement。

需要对addTo函数进行修补，以便它可以像现在一样接受字符串或元素。。在他们的GitHub回购协议中提出要求，他们会迅速做出回应。另一个疯狂的想法是注册一个自定义窗口，并将其指定为window对象和作为文档的阴影根。但这只是我的想法。也许它能起作用：D@Danny感谢您的评论。我今天解决了。请考虑读我的答案。Cheers@fuzzyma好主意，但如果什么都不起作用，那将是我的备份计划：DA可能不太侵入性的方法是使用SVG.findselector，shadowroot-这将把方法范围扩大到shadowroot，并找到您的元素关于文档：如果您在文档中选择3.1，您将找到它。它也应该在3.0版本中，但是一个人很难保持文档的同步。我刚刚注意到，它来自svg.js:D，谢谢你提供的信息！很高兴知道3.1中记录了这一点。