如何从url读取svg?

问题描述 投票:0回答:0

我使用的是Angular 8.我需要从s3 bucket加载svg图片并读取其内容。我需要从s3 bucket加载svg图片并读取其内容。我调用了一个API来获取svg url并将其加载到视图中。Svg图片加载成功。然后我准备读取svg,但是svg的内容是空的。在这段时间里,svg已经加载到了视图中。

html

  <object class="svg-div" id="svg-object" [data]="path" type="image/svg+xml"></object>

组件.ts

export class Test implements OnInit, OnDestroy, PipeTransform {
   constructor(
    private sanitizer: DomSanitizer
    ) {}
   }

     transform(url: any) {
        const urlResource = this.sanitizer.bypassSecurityTrustResourceUrl(url);
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
      }

     ngOnInit() {

          this.getImage(this.deviceId);
     }

   private getImage(deviceId: string) {
    if (this.xSubscription) {
      this.xSubscription.unsubscribe();
    }
    this.xSubscription = this.testService.getImage(deviceId)
      .subscribe(
        image => {
          if(!!image.filePath) {
            this.path = this.transform(image.filePath);
          }
          this.myfucntion();
        }
      );

    myfucntion() {
       let svgDoc;

       const mySVG: any = document.getElementById('svg-object');

       mySVG.addEventListener('load',() => {
          svgDoc = mySVG.contentDocument;
          console.log('svgDoc ',svgDoc);     // This is null..
          const elements = svgDoc.getElementsByTagName('text');
       }
     }
  }

在console.log下面的svgDoc变量值为空。

console.log('svgDoc ',svgDoc);

谁能帮我获取svg的内容?

谢谢

javascript url svg angular8
© www.soinside.com 2019 - 2024. All rights reserved.