如何使用Angular和Ionic 2附加SVG

我使用离子2（TS）开发了一个应用程序。我有一个方法调用API以返回SVG格式的图像。我试图使用绑定将其集成到我的页面上，但它向我显示了图像的svg代码

为了解释和正确集成代码，我认为我们必须使用

Append（）

方法

如何正确使用append to typeScript。我试着这样做，但不起作用：

<div class="svg" [innerHtml]="svgPicture"></div>

但这不起作用。我有一块空白的

---

感谢您的帮助，

Angular希望保护免受XSS攻击，因此出于安全原因，必须先对SVG进行清理，然后才能将其附加到DOM中。您可以使用

管道

来清理试图动态附加到DOM的内容

有关工作示例，请参见

另一件需要注意的事情是，Angular在模板中使用时可以将传统SVG看作普通HTML。为了使用SVG（例如多边形）的子标记，子标记前面应该有一个指示器，表明它是SVG模板的一部分

以下模板

<svg height="200" width="200">
  <polygon points="200,0 200,200 0,200" style="fill:#fff;stroke:#000;stroke-width:1" />
</svg>

…将成为

<svg height="200" width="200">
  <svg:polygon points="200,0 200,200 0,200" style="fill:#fff;stroke:#000;stroke-width:1" />
</svg>

…棱角分明。但是你不能通过管道来运行它。

请参见：

<svg height="200" width="200">
  <svg:polygon points="200,0 200,200 0,200" style="fill:#fff;stroke:#000;stroke-width:1" />
</svg>