Angular：动态渲染时，SVG 路径标记不可见

Question

我有一个从服务器获取的 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,0,3.8,1.7,3.8,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, AfterViewInit, 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 属性未反映在元素样式中，如下例所示：

我尝试在ngAfterViewInit 中使用detectChanges，但没有成功。 当我在检查器中乱来并在 SVG 中手动添加了一个随机的 <g> 时，一切都突然变得可见，d 属性正确地反映在相应元素的样式中。

注意：如果您认为有更好的方法来实现我想要做的事情，请告诉。

Answer 1

显然这是 Angular 中长期存在的错误。

https://github.com/angular/angular/issues/41308

编辑：我发现您可以通过将 ng-template 中使用的 SVG 的每个子元素用自己的 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>