[Fixed] Gradient url not referenced in SVG angular

Issue

I have this gradient im trying to use, my component is on the root of my application at the moment and i tried to put <base href="/"> in the index like some solutions gave, and also tried the APP_BASE_HREF but none of these two seems to work. I dont need to specify the path cause this one is already in the app.component.html

<svg
  attr.height="{{radius * 2}}"
  attr.width="{{radius * 2}}"
>

  <defs>
    <lineargradient id="grad" x1="0" y1="0" x2="1" y2="1">
       <stop offset="15%" stop-color="#FFF" stop-opacity="1"></stop>
       <stop offset="85%" stop-color="#000" stop-opacity="1"></stop>
    </lineargradient>
  </defs>
  <circle
    class="gauge_base"
    attr.cx="{{radius}}"
    attr.cy="{{radius}}"
    stroke="gray"
    attr.r="{{innerRadius}}"
    stroke-width="6px"
    attr.transform="{{transform}}"
    stroke-linecap="round"
    fill="transparent"
    attr.stroke-dasharray="{{dashArray}}"
  />

  <circle
    class="gauge_pourcentage"
    attr.cx="{{radius}}"
    attr.cy="{{radius}}"
    attr.r="{{innerRadius}}"
    stroke="url(#grad)"
    attr.stroke-dasharray="{{dashArray}}"
    stroke-width="12px"
    attr.stroke-dashoffset="{{offset}}"
    attr.transform="{{transform}}"
    style="transition: stroke-dashoffset 0.3s"
    stroke-linecap="round"
    fill="transparent"
  />
</svg>

Solution

typo in linear gradient : lineargradient should be linearGradient cause its case sensitive