如何在SVG中添加Angular和Ionic 2

我使用Ionic 2（TS）開發應用程序。我有一種方法調用API以SVG格式返回圖像。我嘗試使用綁定將其集成到我的頁面上，但它顯示了我的圖像的svg代碼。如何在SVG中添加Angular和Ionic 2

爲了讓代碼被解釋和正確地集成，我認爲我們必須使用Append()方法。

如何正確使用append到typeScript。我嘗試這樣的，但它不工作：

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

而在TS：

svgCard: string = `svg code`

但這行不通。我有一個空白塊。

感謝您的幫助，

看到這個：https：//teropa.info/blog/2016/12/12/graphics-in-angular-2.html – Sampath

角度想從XSS保護，因此，SVG，必須消毒後才能附加到DOM出於安全原因。您可以使用Pipe來清理您嘗試動態追加到DOM的內容。

查看this plunkr的工作示例。

要注意的另一件事是，角可以在模板中使用時看到傳統的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>

...的角度。但是你不能通過Pipe來運行它。

2017-05-20 14:58:58

回答