Angular2不会在运行时呈现SVG

Question

我试图在运行时渲染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代码都是正确的，但它不会呈现任何内容。

有什么想法吗？

谢谢。

Answer 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 方法来做同样的事情。