我使用的是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的内容?
谢谢