SVG未加载角度2 [英] SVG is not loaded with angular 2
本文介绍了SVG未加载角度2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个网站，并将内嵌我的HTML，SVG图片。我用Angular 2制作了一个组件，但SVG图标不会加载。 它向我展示了这一点 [ ^ ]
< div * ngFor = 让成就项;让i =索引 class = achievementcontainer >
< span class =code-keyword>< h3 > {{item。名称}} <跨度class =code-keyword>< / h3 >
< p > {{item .description.replace（'％d'，item.next）}} < / p >
< div < span class =code-attribute> [innerHTML] = item.image [class] = item.status > < / div >
< p 类 = 粗体 > ; 进展到下一个成就：< / p >
< p > < span > {{item.progress}} < / span > / < span > {{item.next}} < / s pan > < / p >
< / div >
import {Component} 来自 @ angular / core;
@Component（{
templateUrl： ./ profile.component.html
}）
export class ProfileComponent {
achievement = [
{
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 = 保留 >
< 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： 追随者，
description： 关注％d人，
进度： 6 ，
next： 35 ，
status： brons
}，{
image：`< svg version = 1.1 id = Layer_1 xmlns = < span class =code-string> http://www.w3.org/2000/svg xmlns：xlink = http://www.w3.org/1999/xli nk x = 0px y = 0px viewBox = 0 0 300 300 style = enable-background：new 0 0 300 300; xml：space = 保留 >
< 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.1l 13.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： 已跟踪％d系列，
进度： 6 ，
next： 20 ，
status： silver
}，{
image：`< svg version = 1.1 id = Layer_1 xmlns = < span class =code-string> http://www.w3.org/2000/svg xmlns：xlink = http://www.w3.org/1999/xlin k x = 0px y = 0px viewBox = 0 0 300 300 style = enable-background：new 0 0 300 300; xml：space = 保留 >
< 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.1l1 3.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： 观看％d小时，
进度： 6 ，
next： 50 ，
status： gold
}
];
} 浏览器中的输出为：
< div _ ngcontent-ejj-7 < span class =code-keyword> = class = achievementcontainer > <！ - three thimes - >
< h3 _ ngcontent-ejj-7 = > 关注者< / h3 >
< p _ngcontent-ejj-7 = > 关注35人< / p >
< div _ ngcontent-ejj-7 = ng-reflect-inner-html = &＃10; &安培;＃10; ng-reflect-class-name = brons class = brons > < span class =code-keyword>< / div >
< p _ ngcontent-ejj-7 = class = 粗体 > 进展到下一个成就：< < span class =code-leadattribute> / p >
< p _ ngcontent-ejj-7 < span class =code-keyword> = > < span _ngcontent-ejj-7 = > 6 < / span > / < span _ ngcontent-ejj-7 = > 35 < / span > < / p >
< / div > 如何在Angular 2的浏览器中渲染SVG？
PS：如果您要运行代码，可以查看这个GitHub项目： Web /前端 [ ^ ]分支 dev-profile 在文件夹 ./ frontend / app / profile 。网址为 http：// localhost：4200 / profile [ ^ ]。
我尝试了什么：
我上面尝试过代码，问此堆栈溢出问题 [ ^ ]并通过我收到的评论在互联网上快速搜索，但没有找到。
解决方案
搜索后，我找到了解决问题的方法。我将下面的构造函数和方法表单代码添加到我的类中：
构造函数（ private sanitizer：DomSanitizer）{
}
转换（html）{
返回 此 .sanitizer.bypassSecurityTrustHtml（HTML）;
}在我的HTML中我使用
< < span class =code-leadattribute> div [innerHTML] = transform（item.image） [class] = item.status > < / div >代替
< div [innerHTML] = item.image [类] = item.status > < / div >
I'm making a site and will place inline with my HTML, SVG pictures. I've made a component with Angular 2 but the SVG icons will not load. It's showing me this[^]
Below and on this fiddle[^] you could find my code:
<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"
}
];
}The output in the browser is this:
<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=" " 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>How comes it that the SVG is not rendering in the browser with Angular 2?
P.S.: If you will run the code, you can check out this GitHub project: Web/frontend[^] on branch dev-profile in folder ./frontend/app/profile. The url is http://localhost:4200/profile[^].
What I have tried:
I've tried code above, asked this Stack overflow question[^] and a quick search on the internet by the comments I've got, but nothing found.
解决方案
After searching, I've found the solution to my problem. I've add constructor and methode form code below to my class:
constructor(private sanitizer: DomSanitizer) { } transform(html) { return this.sanitizer.bypassSecurityTrustHtml(html); }and in my HTML I use
<div [innerHTML]="transform(item.image)" [class]="item.status"></div>in stead of
<div [innerHTML]="item.image" [class]="item.status"></div>
这篇关于SVG未加载角度2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![它向我展示了这一点](\"https://i.stack.imgur.com/Ozo6E.png\"){kind=link}
