Ionic 2自定义SVG加载动画中的旋转器

Question

Ionic 2自定义SVG加载动画中的旋转器

7

我试图将SVG添加到加载创建函数中，但是当我查看它时，我只看到一个空标签。

let loading = this.loadingCtrl.create({spinner: ' ',
            content: this.appConfig.customSpinner })

上面是我创建的代码，那个变量是下面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>

我该如何使它渲染出来？我也在ionic论坛上复制了它，链接在这里link

我尝试添加一个管道，在运行时使其安全，但也失败了。

我将内容修改为：

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

这仍会导致相同的问题。

NB**

更改代码后，我意识到无法将清理程序的返回值直接分配给变量，而是要在类中声明一个变量来存储它。一旦我这样做了，就不再出现TS类型错误，并且svg XML加载成功。

- Ross Rawlins

我已经尝试使用消毒剂解决这个问题，但它仍然抛出相同的问题。我认为这是因为内容没有绑定到元素上，而是被附加了。 - Ross Rawlins

再次问候Ross。我这里有一个可工作的示例： https://github.com/karma-emprendedor/svg-loading-controller 你提到的错误没有出现。你能否提供一个能够重现错误的codepen、git、plunker等代码片段呢？ - Pablo Albaladejo

2个回答

0

你也可以在 "src/theme/variables.scss" 中覆盖加载器样式，例如：

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

- Atif Hussain

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pablo Albaladejo · Accepted Answer

旋转器内容必须是“安全的html”，即您必须使用bypassSecurityTrustHtml。在您的情况下，请尝试使用：

let loading = this.loadingCtrl.create({spinner: ' ',
        content: this.sanitizer.bypassSecurityTrustHtml(this.appConfig.customSpinner)
})

请查看相关问题。

这是我在Ionic 3应用程序中使用的HTML5 Spinner的工作代码：

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存储库中找到工作代码。