Ionic 2定制svg微调器在装载机中 [英] Ionic 2 custom svg spinner in loader

问题描述

我正在尝试将我的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();

可以找到工作代码在这个git存储库

这篇关于Ionic 2定制svg微调器在装载机中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！