Angular 14动态SVG组件元素已渲染但无法显示求助

针对你从Angular 9迁移到Angular 14后SVG动态渲染元素存在但无法显示的问题，以下是核心排查点和修复方案：

1. 修复<use>元素的href属性 #

SVG2标准已弃用xlink:href，改用原生href属性，Angular 14对属性绑定的兼容性更严格，需修改svg-builder模板中的<use>标签：

<!-- 原代码 -->
<use [attr.xlink:href]="SymbolLink" />

<!-- 修改后 -->
<use [attr.href]="'#' + SvgData.graphicId" />

同时确保SymbolLink的格式为#${graphicId}，直接拼接更不易出错。

2. 移除不必要的嵌套SVG标签 #

svg-component模板中每次都用<svg>包裹子元素，会导致DOM中出现多层嵌套SVG，内层SVG因未设置尺寸默认缩为0。修改模板去掉根<svg>标签：

<ng-container *ngIf="TemplateType === 'single element'">
  <g [innerHtml]="insertElement()"></g>
</ng-container>

<g #graphicContainer *ngIf="TemplateType == 'group element'">
  <svg-component *ngFor="let item of ElementData.subElements" [ElementData]="item"></svg-component>
</g>

<linearGradient #graphicContainer *ngIf="TemplateType === 'linear gradient'" [attr.id]="ElementData.id">
  <svg-component *ngFor="let item of ElementData.subElements" [ElementData]="item"></svg-component>
</linearGradient>

<radialGradient #graphicContainer *ngIf="TemplateType === 'radial gradient'" [attr.id]="ElementData.id">
  <svg-component *ngFor="let item of ElementData.subElements" [ElementData]="item"></svg-component>
</radialGradient>

<symbol #graphicContainer *ngIf="TemplateType === 'symbol'" [attr.id]="ElementData.id">
  <svg-component *ngFor="let item of ElementData.subElements" [ElementData]="item"></svg-component>
</symbol>

注意：原模板中最后一个symbol的判断条件错误写成了'linear gradient'，需修正为'symbol'，否则无法正确渲染符号元素。

3. 确保SVG容器的尺寸配置 #

外层和引用symbol的内层SVG都需要设置尺寸或viewBox，否则元素会因无尺寸无法显示：

<!-- 修改svg-builder的外层SVG -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" [attr.viewBox]="GraphicViewBox">
  <!-- 内部内容 -->
  <svg preserveAspectRatio="xMidYMid meet" [attr.viewBox]="GraphicViewBox">
    <use [attr.href]="'#' + SvgData.graphicId" />
  </svg>
</svg>

4. 验证DomSanitizer安全处理 #

Angular 14对动态插入的HTML会严格过滤，必须通过DomSanitizer显式信任内容：
在组件类中注入并使用：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

insertElement(): SafeHtml {
  return this.sanitizer.bypassSecurityTrustHtml(this.ElementData.content);
}

insertStyles(): SafeHtml {
  return this.sanitizer.bypassSecurityTrustHtml(this.GlobalStyling);
}

5. 移除过时的svg:前缀 #

Angular Ivy引擎（Angular 9+默认启用）已能正确识别SVG命名空间，无需再给元素添加svg:前缀，需移除代码中相关的前缀处理逻辑。

总结排查步骤 #

1. 检查<use>标签是否使用标准href属性
2. 清理嵌套的冗余SVG标签，简化DOM结构
3. 为所有SVG容器设置width/height或viewBox
4. 确认动态插入的HTML已通过DomSanitizer处理
5. 修复模板中的逻辑错误（如symbol的判断条件）

内容的提问来源于stack exchange，提问作者Optiq