Angular2不会在运行时呈现SVG

Question

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

我已经使用ComponentFactoryResolver和ViewContainerRef的方法createComponent尝试过。在此之后，渲染类（我试图不使用nativeElement由于从角队的建议），标记名前加上命名空间：<svg:rect>并选择属性selector: ':svg:g[svg-box]' ...

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

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

任何想法？

谢谢。

Answer 1

终于我明白了！

使用渲染器类，当我们创建SVG元素时，我们必须在元素的标记之前添加以下内容：:svg:tag。在我的情况：使用ComponentFactoryResolver和ViewContainerRef的方法createComponent方法https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p=preview

现在，我试图做同样的：

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

您可以在此plunker的版本3检查。