SVG не загружен Angular 2

Question

Я создаю сайт и разместил его в строках с моими изображениями HTML, SVG. Я создал компонент с Angular 2, но значки SVG не будут загружаться. Он показывает мне это:

Ниже и this fiddle вы могли бы найти свой код:

<div *ngFor="let item of achievements; let i = index" class="achievementscontainer"> 
    <h3>{{item.name}}</h3> 
    <p>{{item.description.replace('%d', item.next)}}</p> 
    <div [innerHTML]="item.image" [class]="item.status"></div> 
    <p class="bold">Progress till next achievement:</p> 
    <p><span>{{item.progress}}</span>/<span>{{item.next}}</span></p> 
</div> 

import { Component } from '@angular/core'; 
@Component({ 
    templateUrl: "./profile.component.html" 
}) 
export class ProfileComponent { 
    achievements = [ 
     { 
      image: `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve"> 
         <path class="st0" d="M194.5,101.5c10.3-10.8,16.6-25.4,16.6-41.4C211.1,26.9,184.2,0,151,0C117.9,0,91,26.9,91,60.1 c0,15.8,6.1,30.2,16.1,40.9c-33.7,10.4-58.4,41.8-58.4,78.8v84.8c0,19.4,15.9,35.3,35.3,35.3h129.6c20.7,0,37.7-17,37.7-37.7v-82.5 C251.3,143.4,227.4,112.4,194.5,101.5z"/> 
        </svg>`, 
      name: "Follower", 
      description: "Followed %d people", 
      progress: 6, 
      next: 35, 
      status: "brons" 
     }, { 
      image: `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve"> 
         <path class="st0" d="M263.1,218.1l2.6-4.5l13.5,7.8c11.4-20.5,18.1-43.9,18.6-68.9H282v-5.2h15.7c-0.4-25-7-48.5-18.4-69l-13.7,7.9 l-2.6-4.5l13.7-7.9c-12.4-20.7-29.8-38.1-50.5-50.5l-7.9,13.7l-4.5-2.6l7.9-13.7c-20.5-11.4-44-18-69-18.4v15.7h-5.2V2.4 c-25,0.5-48.4,7.1-68.9,18.6l7.8,13.5L82,37.1l-7.8-13.5C53.6,36,36.3,53.4,23.9,74.1l13.4,7.7l-2.6,4.5l-13.4-7.7 C10,99,3.4,122.4,3,147.4h15.3v5.2H3c0.5,24.9,7.1,48.3,18.5,68.7l13.2-7.6l2.6,4.5l-13.2,7.6c12.4,20.6,29.7,37.9,50.3,50.3 l7.6-13.2l4.5,2.6l-7.6,13.2c20.4,11.3,43.8,18,68.7,18.4v-15.3h5.2v15.3c24.9-0.4,48.4-7,68.8-18.3l-7.7-13.3l4.5-2.6l7.7,13.3 c20.7-12.4,38-29.7,50.5-50.3L263.1,218.1z M228.1,55.1l-66.9,92.5c0.4,2.9,0,5.8-1.3,8.5l47.1,71.5c0.9,1.3,0.5,3.1-0.8,4l-8.4,5.6 c-1.3,0.8-3,0.5-3.8-0.8L146,163.7c-3.1-0.3-6.2-1.6-8.6-4c-5.5-5.5-5.5-14.3,0-19.8c3.6-3.6,8.6-4.8,13.2-3.7l65.1-90 c0.9-1.2,2.5-1.5,3.7-0.6l7.9,5.7C228.7,52.1,229,53.9,228.1,55.1z"/> 
        </svg>`, 
      name: "Tracker", 
      description: "Tracked %d series", 
      progress: 6, 
      next: 20, 
      status: "silver" 
     }, { 
      image: `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve"> 
         <path class="st0" d="M263.1,218.1l2.6-4.5l13.5,7.8c11.4-20.5,18.1-43.9,18.6-68.9H282v-5.2h15.7c-0.4-25-7-48.5-18.4-69l-13.7,7.9 l-2.6-4.5l13.7-7.9c-12.4-20.7-29.8-38.1-50.5-50.5l-7.9,13.7l-4.5-2.6l7.9-13.7c-20.5-11.4-44-18-69-18.4v15.7h-5.2V2.4 c-25,0.5-48.4,7.1-68.9,18.6l7.8,13.5L82,37.1l-7.8-13.5C53.6,36,36.3,53.4,23.9,74.1l13.4,7.7l-2.6,4.5l-13.4-7.7 c10,99,3.4,122.4,3,147.4h15.3v5.2H3c0.5,24.9,7.1,48.3,18.5,68.7l13.2-7.6l2.6,4.5l-13.2,7.6c12.4,20.6,29.7,37.9,50.3,50.3 l7.6-13.2l4.5,2.6l-7.6,13.2c20.4,11.3,43.8,18,68.7,18.4v-15.3h5.2v15.3c24.9-0.4,48.4-7,68.8-18.3l-7.7-13.3l4.5-2.6l7.7,13.3 c20.7-12.4,38-29.7,50.5-50.3L263.1,218.1z M228.1,55.1l-66.9,92.5c0.4,2.9,0,5.8-1.3,8.5l47.1,71.5c0.9,1.3,0.5,3.1-0.8,4l-8.4,5.6 c-1.3,0.8-3,0.5-3.8-0.8L146,163.7c-3.1-0.3-6.2-1.6-8.6-4c-5.5-5.5-5.5-14.3,0-19.8c3.6-3.6,8.6-4.8,13.2-3.7l65.1-90 c0.9-1.2,2.5-1.5,3.7-0.6l7.9,5.7C228.7,52.1,229,53.9,228.1,55.1z"/> 
        </svg>`, 
      name: "Watcher", 
      description: "Watched %d hours", 
      progress: 6, 
      next: 50, 
      status: "gold" 
     } 
    ]; 
} 

Выход в браузере заключается в следующем:

<div _ngcontent-ejj-7="" class="achievementscontainer"> <!-- three thimes --> 
    <h3 _ngcontent-ejj-7="">Follower</h3> 
    <p _ngcontent-ejj-7="">Followed 35 people</p> 
    <div _ngcontent-ejj-7="" ng-reflect-inner-h-t-m-l="&amp;#10;      &amp;#10;     " ng-reflect-class-name="brons" class="brons"></div> 
    <p _ngcontent-ejj-7="" class="bold">Progress till next achievement:</p> 
    <p _ngcontent-ejj-7=""><span _ngcontent-ejj-7="">6</span>/<span _ngcontent-ejj-7="">35</span></p> 
</div> 

Как приходит, что SVG не выполняет рендеринг в браузере с помощью Angular 2?

P.S. 1: Если вы запустите код, вы можете проверить этот проект GitHub: WatchFriends/Web на ветке dev-profile в папке ./frontend/app/profile. URL-адрес: http://localhost:4200/profile.

P.S. 2: Happy 2017 and may your wish true :)

Answer 1

После поиска я нашел решение своей проблемы. Я добавить конструктор и форму Methode ниже код для моего класса:

constructor(private sanitizer: DomSanitizer) { 
} 

transform(html) { 
    return this.sanitizer.bypassSecurityTrustHtml(html); 
} 

и в моем HTML я использую

<div [innerHTML]="transform(item.image)" [class]="item.status"></div> 

в смену

<div [innerHTML]="item.image" [class]="item.status"></div> 

Благодаря @micronyks и @ GünterZöchbauer для комментариев.