Angular2无法在运行时呈现SVG [英] Angular2 does not render SVG in runtime

问题描述

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

I am trying to render SVG graphics in run-time with no success. Only works if i put the SVG code inside the component's template.

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

I have tried it using the ComponentFactoryResolver and the ViewContainerRef's method createComponent. After that, the Renderer class (i'm trying to not use the nativeElement due the recommendations from Angular team), adding the namespace before the tagname: <svg:rect> and the selector property selector: ':svg:g[svg-box]'...

我正在使用Angular 2.0.0-rc.5.您可以在此处进行检查 https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p=preview

I am using Angular 2.0.0-rc.5. You can check it here https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p=preview

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

In both cases the generated HTML code is correct but it doesn't render anything.

有什么想法吗?

谢谢.

推荐答案

最后我明白了！

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

Using the Renderer class, when we create SVG elements we have to add the following before the element's tag: :svg:tag. In my case:

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

您可以在此插件的版本3中进行检查: https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p =预览

You can check it in this plunker's version 3: https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p=preview

现在，我正尝试使用 ComponentFactoryResolver 和ViewContainerRef的方法 createComponent 方法进行相同的操作.

Now i'm trying to do the same using the ComponentFactoryResolver and the ViewContainerRef's method createComponent approach.

这篇关于Angular2无法在运行时呈现SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！