Angular 在角度组件中使用外部SVG设置样式

我正在使用Angular并尝试使用我制作的一些SVG，我很难让它们在页面中正确显示和样式。我在一个单独的.svg文件中设置了一些，我正在使用标记将它们带到页面中

以下是项目文件的外观：

• src
  • 应用程序
    • 形状
      • shapes.component.html
      • shapes.component.ts
      • shapes.svg

在shapes.svg中：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="blackGradient">
        <stop offset="10%" stop-color="#202020" />
        <stop offset="50%" stop-color="#404040" />
        <stop offset="80%" stop-color="#202020" />
    </linearGradient>
    <g id="testRect" fill="black">
        <circle cx="400" cy="400" r="5" />
        <g>
            <rect x="10" y="150" width="10" height="460" fill="url(#blackGradient)"/>
        </g>
    </g>  
  </defs>
</svg>

内部shapes.component.html

<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
    <use href="app/Signals/PRR/prrdefs.svg#testRect" />
  </svg>
</div>

当我运行此代码时，不会显示矩形。如果我将填充更改为仅黑色，它将显示得很好。如果我将所有def都放在shape.component.html中，那么将显示矩形并正确设置其样式。当我在externalshapes.svg文件中使用gradient def时，有人能看到我做错了什么吗？我不认为这是一个url的问题，但我是新的工作SVG的角度

提前谢谢大家,， 肖恩