[Fixed] Angular: SVG Path Tag Not Visible When Rendered Dynamically

Issue

I have an SVG file that I fetch from the server which then I have to render into the view that I have.

The problem is that I can’t use <img> or [innerHTML] because I need to add user interactions and events and integrate it into Angular’s lifecycle.

so I wrote the following code to to parse the XML and render it into concrete elements into the component template:

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>

However, nothing is displayed.
Now, when I inspect the DOM in the browser, it’s all there and rendered correctly, but what I noticed is that the d attribute isn’t reflected in element style as in the following example:

I tried to use detectChanges in ngAfterViewInit but it didn’t work.
When I was messing around with the inspector and manually added a random <g> inside the SVG, everything became suddenly visible and the d attributes were correctly reflected in the corresponding elements’ styles.

Note: If you think there is a better method to achieve what I am trying to do, please do tell.

Solution

Apparently this is a long-running bug in Angular.

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

Edit: I found that you can mitigate the problem by surrounding each child element of the SVG used in ng-template by its own SVG tag. It has no apparent drawbacks.

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