如何使用 Angular 和 Ionic 2 附加 SVG

Question

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

为了解释和正确集成代码，我认为我们必须使用Append()方法。

如何正确使用追加到类型脚本。我尝试这样做，但它不起作用：

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

在 TS 中：

svgCard: string = `svg code`

但这行不通。我有一个空白块。

谢谢你的帮助，

Answer 1

Angular 希望防止 XSS，因此出于安全原因，SVG 必须先进行清理，然后才能附加到 DOM 中。您可以使用Pipe来清理您尝试动态追加到 DOM 的内容。

有关工作示例，请参阅此 plunkr。

需要注意的另一件事是，在模板中使用时，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>

。在角度。但是你不能通过管道运行它。