角度 SVG 渐变填充不渲染答案

【问题标题】：Angular SVG gradient fill not rendering角度 SVG 渐变填充不渲染
【发布时间】：2021-10-24 02:33:56
【问题描述】：

最初道歉，因为我并不完全熟悉我正在尝试做的所有确切术语：我正在尝试使用 Angular (12) 呈现 SVG 图标。我的 SVG (discover.svg) 的（精简版）是：

<svg id="discover" 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(/assets/img/icons/discover.svg#grad2);" cx="20.063" cy="10.251" r="2.906" />
</svg>

呈现图标的Angular组件代码是：

@Component({
  selector: 'my-icon',
  template: `
    <svg width="1em" height="1em">
      <use [attr.href]="getIconUrl()"></use>
    </svg>
  `
})

getIconUrl() 获取正确的 URL 以拉入 SVG (http://localhost:8080/assets/img/icons/discover.svg#discover)，并且 SVG 显示在底部带有橙色“swoosh”，但我无法显示径向渐变填充 - 它是只是空它应该在的地方。填充 URL 在 chrome 开发工具 (http://localhost:8080/assets/img/icons/discover.svg#grad2) 中看起来正确，但没有显示。

如果还有什么我需要提供的 - 请告诉我。

这是在 Chrome 中呈现的完整 HTML：

<my-icon ng-reflect-icon="discover" title="discover">
  <svg width="1em" height="1em">
    <use href="http://localhost:8080/assets/img/icons/discover.svg#discover">
      #shadow-root (closed)
      <svg id="discover" viewBox="0 0 38.257 24.47" xmlns="http://www.w3.org/2000/svg">
          <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>
          <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);"></path>
        <circle style="fill: url(/assets/img/icons/discover.svg#grad2);" cx="20.063" cy="10.251" r="2.906"></circle>
      </svg>
    </use>
  </svg>
</my-icon>

【问题讨论】：

标签： angular svg

【解决方案1】：

从圆圈中可以直接参考radialGradiant id。

<circle style="fill: url(#grad2);" cx="20.063" cy="10.251" r="2.906" />

【讨论】：

Angular 为文档创建了一个基本标签，所以如果我没有限定 URL，它只会尝试指向 http://localhost:8080/#grad2