I’m trying to dynamically render SVG elements in a loop in an Angular template. Where I use the ol.type to select the correct SVG component to render:

      <g
        *ngFor="let ol of obstacleLocations"
      >
        <g [attr.class]="ol.type"></g>
      </g>

An example of a component with a class selector:

@Component({
  selector: '.wingedsinglejump',
  template: `
    <svg
      width="100px"
      height="4px"
      viewBox="0 0 100 4"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <g
          id="WingedSingleJump"
          style="stroke: black; stroke-width: 1.5; stroke-linecap: round"
        >
          <rect x="0" y="0" width="24" height="4" style="fill: lightgrey" />
          <line x1="24" y1="2" x2="78" y2="2" />
          <rect x="72" y="0" width="24" height="4" style="fill: lightgrey" />
        </g>
      </defs>
      <use href="#WingedSingleJump" transform="translate(-50 -2)" />
    </svg>
  `,
})
export class WingedSingleJumpComponent { }

The component is not rendered even though the generated SVG does contain a class name that matches the selector:

<g _ngcontent-ng-c2812641055="">
  <g _ngcontent-ng-c2812641055="" class="wingedsinglejump"></g>
</g>

However, if I hard code the class name in the template as a test:

      <g
        *ngFor="let ol of obstacleLocations"
      >
        <g class="wingedsinglejump"></g>
      </g>

The component is correctly rendered:

<g _ngcontent-ng-c2812641055="">
  <g _ngcontent-ng-c2812641055="" class="wingedsinglejump">
    <svg width="100px" height="4px" viewBox="0 0 100 4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><g id="WingedSingleJump" style="stroke: black; stroke-width: 1.5; stroke-linecap: round;"><rect x="0" y="0" width="24" height="4" style="fill: lightgrey;"></rect><line x1="24" y1="2" x2="78" y2="2"></line><rect x="72" y="0" width="24" height="4" style="fill: lightgrey;"></rect></g></defs><use href="#WingedSingleJump" transform="translate(-50 -2)"></use></svg>
  </g>
</g>

Any pointers would be greatly appreciated.