问题:

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 })

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.

I made the content this:

<div [innerHTML]='appConfig.customSpinner | safe'></div>

And this is my pipe:

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);   } }

I have also tried with using a file:

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**

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.

回答1:

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) })

Check this related question.

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);    } }

Hope it helps.

Update using 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();

The working code can be found at this git repository

回答2:

you can also overwrite the loader styles in "src/theme/variables.scss" e.g.

    ion-loading {         ion-backdrop {             background-color: white !important;         }         .loading-wrapper {             justify-content: center !important;             opacity: 0.8 !important;             background-color: white !important;             width: 100% !important;             height: 100% !important;             max-width: 100% !important;             max-height: 100% !important;         }          .spinner-crescent circle {             stroke: green !important;         }          .spinner-ios line,         .spinner-ios-small line {             stroke: green !important;         }     }

转载请标明出处:Ionic 2 custom svg spinner in loader

文章来源: Ionic 2 custom svg spinner in loader

标签

spinner

svg

ionic