如何解决Angular:动态渲染时 SVG 路径标签不可见
我有一个从服务器获取的 SVG 文件,然后我必须将其渲染到我拥有的视图中。
问题是我不能使用 <img>
或 [innerHTML]
,因为我需要添加用户交互和事件并将其集成到 Angular 的生命周期中。
所以我编写了以下代码来解析 XML 并将其呈现为组件模板中的具体元素:
svg-map-test.component.ts:
import { AfterViewChecked,AfterViewInit,ChangeDetectorRef,Component,Inject,OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';
const svg = `
<!-- Generator: Adobe Illustrator 24.0.2,SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1180.5 841.9" style="enable-background:new 0 0 1180.5 841.9;" xml:space="preserve">
<style type="text/css">
\t.st0{fill:#F89464;}
\t.st1{fill:#B6B773;}
\t.st2{fill:#4CFEFC;}
\t.st3{fill:#606060;}
\t.st4{fill:#FFFFFF;}
</style>
<g id="s:gold">
\t<g id="r:a">
\t\t<g id="c:a2">
\t\t\t<path class="st0" d="M911.9,62.3H896c-2.1,0-3.8-1.7-3.8-3.8V42.6c0-2.1,1.7-3.8,3.8-3.8h15.9c2.1,3.8,1.7,3.8v15.9
\t\t\t\tC915.7,60.6,914,62.3,911.9,62.3z"/>
\t\t</g>
\t</g>
</g>
</svg>
`
@Component({
selector: 'app-svg-map-test',templateUrl: './svg-map-test.component.html',styleUrls: ['./svg-map-test.component.scss']
})
export class SvgMapTestComponent implements OnInit,AfterViewChecked {
xmlDom: Document;
constructor(@Inject(DOCUMENT) private document: Document,private cdRef: ChangeDetectorRef) {
}
ngOnInit(): void {
const parser = new DOMParser();
this.xmlDom = parser.parseFromString(svg,'image/svg+xml');
}
fakeArray(collection: HTMLCollection) {
const res = [];
for (let i = 0; i < collection.length; i++) {
res.push(collection.item(i));
}
return res;
}
}
svg-map-test.component.html:
<ng-container *ngIf="xmlDom" [ngTemplateOutlet]="element" [ngTemplateOutletContext]="{ $implicit: xmlDom.documentElement }"></ng-container>
<ng-template #element let-parent>
<ng-container [ngSwitch]="parent.nodeName">
<ng-container *ngSwitchCase="'svg'" [ngTemplateOutlet]="svgElement" [ngTemplateOutletContext]="{ $implicit: parent }">
</ng-container>
<ng-container *ngSwitchCase="'style'" [ngTemplateOutlet]="styleElement" [ngTemplateOutletContext]="{ $implicit: parent }">
</ng-container>
<ng-container *ngSwitchCase="'g'" [ngTemplateOutlet]="gElement" [ngTemplateOutletContext]="{ $implicit: parent }">
</ng-container>
<ng-container *ngSwitchCase="'rect'" [ngTemplateOutlet]="rectElement" [ngTemplateOutletContext]="{ $implicit: parent }">
</ng-container>
<ng-container *ngSwitchCase="'path'" [ngTemplateOutlet]="pathElement" [ngTemplateOutletContext]="{ $implicit: parent }">
</ng-container>
</ng-container>
</ng-template>
<ng-template #nested let-children>
<ng-container *ngFor="let item of fakeArray(children)">
<ng-container [ngTemplateOutlet]="element" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
</ng-container>
</ng-template>
<ng-template #svgElement let-svg>
<svg [attr.version]="svg.getAttribute('version')"
[attr.xmlns]="svg.getAttribute('xmlns')"
[attr.xmlns:xlink]="svg.getAttribute('xmlns:xlink')"
[attr.x]="svg.getAttribute('x')"
[attr.y]="svg.getAttribute('y')"
[attr.viewBox]="svg.getAttribute('viewBox')"
[attr.xml:space]="svg.getAttribute('xml:space')">
<ng-container [ngTemplateOutlet]="nested" [ngTemplateOutletContext]="{ $implicit: svg.children }"></ng-container>
</svg>
</ng-template>
<ng-template #styleElement let-style>
<style type="text/css">
.st0{fill:#F89464;}
.st1{fill:#B6B773;}
.st2{fill:#4CFEFC;}
.st3{fill:#606060;}
.st4{fill:#FFFFFF;}
</style>
</ng-template>
<ng-template #gElement let-g>
<g [attr.id]="g.getAttribute('id')">
<ng-container [ngTemplateOutlet]="nested" [ngTemplateOutletContext]="{ $implicit: g.children }"></ng-container>
</g>
</ng-template>
<ng-template #rectElement let-rect>
<rect [attr.x]="rect.getAttribute('x')"
[attr.y]="rect.getAttribute('y')"
[class]="rect.className"
[attr.width]="rect.getAttribute('width')"
[attr.height]="rect.getAttribute('height')"></rect>
</ng-template>
<ng-template #pathElement let-path>
<path [attr.d]="path.getAttribute('d')">
</path>
</ng-template>
但是,没有显示任何内容。
现在,当我在浏览器中检查 DOM 时,一切都在那里并正确呈现,但我注意到 d
属性没有反映在元素样式中,如下例所示:
我尝试在 detectChanges
中使用 ngAfterViewInit
,但是没有用。
当我弄乱检查器并在 SVG 中手动添加一个随机 <g>
时,所有内容突然变得可见,并且 d
属性正确反映在相应元素的样式中。
注意:如果您认为有更好的方法来实现我想要做的事情,请告诉我。
解决方法
显然这是 Angular 中长期存在的错误。
https://github.com/angular/angular/issues/41308
编辑:我发现您可以通过用自己的 SVG 标签围绕 ng-template 中使用的 SVG 的每个子元素来缓解这个问题。它没有明显的缺点。
<ng-template #rectElement let-rect>
<svg>
<rect [attr.x]="rect.getAttribute('x')"
[attr.y]="rect.getAttribute('y')"
[class]="rect.className"
[attr.width]="rect.getAttribute('width')"
[attr.height]="rect.getAttribute('height')"></rect>
</svg>
</ng-template>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。