Angular 12使用<use>引入外部SVG时radialGradient径向渐变不渲染问题

• 你通过<use>标签引用外部SVG片段时，Chrome在shadow DOM中渲染外部SVG内容时，会剥离原SVG内部的<defs>定义，导致径向渐变#grad2找不到对应定义，因此圆形区域无填充。
• 你原SVG中圆形的填充属性写的是绝对路径引用url(/assets/img/icons/discover.svg#grad2)，虽然本地路径正确，但Chrome不会跨shadow DOM解析外部SVG资源里的ID引用，进一步导致渐变失效。

方案1：改用内联SVG方式（最稳妥，无兼容问题） #

直接将discover.svg的完整内容复制到你的图标组件模板中，替换原有<use>引用逻辑即可，代码示例：

@Component({
  selector: 'my-icon',
  template: `
    <svg width="1em" height="1em" viewBox="0 0 38.257 24.47" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="grad2" gradientUnits="userSpaceOnUse" cx="17.278" cy="10.17" r="2.906"
          gradientTransform="matrix(-1.320119, -1.659667, 1.942541, -1.545116, 24.895274, 56.860206)">
          <stop offset="0" style="stop-color: rgb(238, 143, 48);" />
          <stop offset="0.5" style="stop-color: rgb(255, 80, 0);" />
          <stop offset="1" style="stop-color: rgba(40, 14, 6, 1);" />
        </radialGradient>
      </defs>
      <path id="Path_14883" data-name="Path 14883" d="M18.366-198.8l37.986,0v24.192H18.37Z" transform="translate(-18.231 198.943)" fill="#fff" />
      <path id="Path_14884" data-name="Path 14884" d="M87.316-135.9s-10.38,7.325-29.39,10.6h29.39Z" transform="translate(-49.33 149.496)"
        style="fill: rgb(255, 80, 0);" />
      <circle style="fill: url(#grad2);" cx="20.063" cy="10.251" r="2.906" />
    </svg>
  `
})

如果有多个图标需要复用，可将SVG内容封装为独立组件或者通过Angular的DomSanitizer动态注入SVG内容。

方案2：全局注册渐变定义 #

如果需要保留<use>引用外部SVG的逻辑，可将所有SVG用到的<defs>内容提取出来，内联到index.html的<body>标签最开头，保证渐变ID全局可访问，同时把原SVG中圆形的填充属性修改为fill="url(#grad2)"即可。

方案3：使用Angular Material图标模块 #

如果你项目中用到了Angular Material，可通过MatIconRegistry直接注册SVG图标，框架会自动处理defs、路径等兼容问题，代码示例：

// 组件或模块中注册
constructor(private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
  this.iconRegistry.addSvgIcon(
    'discover',
    this.sanitizer.bypassSecurityTrustResourceUrl('/assets/img/icons/discover.svg')
  );
}

模板中直接使用：

<mat-icon svgIcon="discover"></mat-icon>

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