问题描述
我正在尝试将我的SVG添加到加载创建功能，但是当我去查看它时，我看到它应该是一个空标记。
I am trying to add my SVG to the loading create function but when I go to view it all I see is an empty tag where it should be.
let loading = this.loadingCtrl.create({spinner: ' ',
content: this.appConfig.customSpinner })
以上是我的创建代码，该变量是下面的SVG代码。
Above is my create code and that variable is hte code below for the SVG.
<svg id="Layer_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2419 1188.4">
<defs>
<mask id="mask">
<path fill="#000" d="M570.2 87.3L163.8 322c-15.6 9-25.2 25.6-25.2 43.6v469.3c0 18 9.6 34.6 25.2 43.6l406.4 234.7c15.6 9 34.7 9 50.3 0l406.4-234.7c15.6-9 25.2-25.6 25.2-43.6V365.6c0-18-9.6-34.6-25.2-43.6L620.5 87.3c-15.5-8.9-34.7-8.9-50.3 0z"/>
<path fill="#000" d="M787.4 474.6V343.5H394.2v505.6h131V661.8h262.2v-131H525.2v-56.2z"/>
<path fill="#000" d="M581.4 718h206v131.1h-206z"/>
<circle fill="#fff" cx="0" cy="1450" r="551.3"/>
</mask>
</defs>
<style>
.st2{fill:none;stroke-width:40;stroke-miterlimit:10;}
</style>
<path id="background" mask="url(#mask)" fill="#F16E18" d="M570.2 87.3L163.8 322c-15.6 9-25.2 25.6-25.2 43.6v469.3c0 18 9.6 34.6 25.2 43.6l406.4 234.7c15.6 9 34.7 9 50.3 0l406.4-234.7c15.6-9 25.2-25.6 25.2-43.6V365.6c0-18-9.6-34.6-25.2-43.6L620.5 87.3c-15.5-8.9-34.7-8.9-50.3 0z"/>
<path class="letter" mask="url(#mask)" fill="#fff" d="M787.4 474.6V343.5H394.2v505.6h131V661.8h262.2v-131H525.2v-56.2z"/>
<path class="letter" mask="url(#mask)" fill="#fff" d="M581.4 718h206v131.1h-206z"/>
<path id="hexagon-2" stroke="transparent" class="st2" d="M570.1 82.5L163.7 317.2c-15.6 9-25.2 25.6-25.2 43.6v469.3c0 18 9.6 34.6 25.2 43.6l406.4 234.7c15.6 9 34.7 9 50.3 0l406.4-234.7c15.6-9 25.2-25.6 25.2-43.6V360.8c0-18-9.6-34.6-25.2-43.6L620.4 82.5c-15.5-8.9-34.7-8.9-50.3 0z"/>
<path id="hexagon-1" stroke="transparent" class="st2" d="M570.1 82.5L163.7 317.2c-15.6 9-25.2 25.6-25.2 43.6v469.3c0 18 9.6 34.6 25.2 43.6l406.4 234.7c15.6 9 34.7 9 50.3 0l406.4-234.7c15.6-9 25.2-25.6 25.2-43.6V360.8c0-18-9.6-34.6-25.2-43.6L620.4 82.5c-15.5-8.9-34.7-8.9-50.3 0z"/>
</svg>
如何让它渲染？我也将它复制到离子论坛上
How can I get it to render? I have also replicated it to the ionic forum on this link
我试图添加一个管道，使其在运行时安全，但也失败。
I have tried to add a pipe that will make it safe in run time but that also fails.
我发了这样的内容：
<div [innerHTML]='appConfig.customSpinner | safe'></div>
这是我的烟斗：
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({name: 'safe'})
export class SafeHtml {
constructor(private sanitizer:DomSanitizer){}
transform(html:any):any {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}
我也试过使用文件：
let loading = this.loadingCtrl.create({spinner: 'hide', content:"<object data='assets/spinner.svg' type='image/svg+xml'></object>"})
这仍然会导致同样的问题。
This still causes the same issue.
NB **
更改我的代码后，我意识到你不能从变量内部的清理程序中分配返回值，而不是在类中声明变量。一个我做了这个我不再得到TS类型错误和svg XML加载。
After changing my code I realised that you cannot assign the return value from the sanitizer inside the variable but rather a declared variable in the class. One I did this I no longer got the TS type error and the svg XML loaded.
推荐答案
微调内容必须是'安全的html'，即你必须使用bypassSecurityTrustHtml。
在您的情况下尝试使用：
The spinner content must be 'safe html', i.e. you must use bypassSecurityTrustHtml.In your case try using:
let loading = this.loadingCtrl.create({spinner: ' ',
content: this.sanitizer.bypassSecurityTrustHtml(this.appConfig.customSpinner)
})
检查此。
这是我在Ionic 3 app上的html5微调器的工作代码：
This is my working code for html5 spinner at Ionic 3 app:
import { DomSanitizer } from '@angular/platform-browser';
constructor(private sanitizer: DomSanitizer){
getProgressBar(percentaje) {
let html: string = '<span style="text-align: center">Loading...'
+ Math.round(percentaje)+'%</span>'
+ '<br><progress value="' + percentaje + '" max="100"></progress>';
return this.sanitizer.bypassSecurityTrustHtml(html);
}
doSomething(){
let loading = this.loadingCtrl.create({
spinner: 'hide',
});
loading.data.content = this.getProgressBar(0);
loading.present();
//some stuff
loading.data.content = this.getProgressBar(progress);
}
}
希望有所帮助。
使用svg更新：
let svg = `<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>`;
this.safeSvg = this.sanitizer.bypassSecurityTrustHtml(svg);
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: this.safeSvg,
});
loading.present();
可以找到工作代码
这篇关于Ionic 2定制svg微调器在装载机中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！