Angular2 在运行时不渲染 SVG答案

【问题标题】：Angular2 does not render SVG in runtimeAngular2 在运行时不渲染 SVG
【发布时间】：2017-01-05 19:33:37
【问题描述】：

我试图在运行时渲染 SVG 图形但没有成功。仅当我将 SVG 代码放在组件的模板中时才有效。

我已经使用 ComponentFactoryResolver 和 ViewContainerRef 的方法 createComponent 进行了尝试。之后，Renderer 类（由于 Angular 团队的建议，我试图不使用 nativeElement），在标记名之前添加命名空间：<svg:rect> 和选择器属性selector: ':svg:g[svg-box]'...

我正在使用 Angular 2.0.0-rc.5。你可以在这里查看https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p=preview

在这两种情况下，生成的 HTML 代码都是正确的，但它不会呈现任何内容。

有什么想法吗？

谢谢。

【问题讨论】：

标签： svg angular

【解决方案1】：

终于明白了！！

使用 Renderer 类，当我们创建 SVG 元素时，我们必须在元素标签前添加以下内容：:svg:tag。就我而言：

this.SVGRenderer.createElement(this.parent.nativeElement, ":svg:rect");

您可以在这个 plunker 的第 3 版中查看它：https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p=preview

现在我正在尝试使用 ComponentFactoryResolver 和 ViewContainerRef 的方法 createComponent 方法来做同样的事情。

【讨论】：

请问“SVGRenderer”类是什么？
你能用ComponentFactoryResolver 实现这个吗？ Angular 似乎有一个错误。它只是不渲染