CODEWITHSUNDEEP
angularsvg
Tahtoh
Tahtoh

Reputation: 57

Gradient url not referenced in SVG angular

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>

Upvotes: 0

Views: 352

Answers (2)

Tahtoh
Tahtoh

Reputation: 57

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

Upvotes: 0

as22
as22

Reputation: 11

I dont really know SVG that well and tbh im not sure that i'm following the question correctly, A bit more information about how you intend to use the gradient would be useful. However seems no one else has answered, this might help. According to W3S you need to set the fill to url(#id-of-gradient).

For example

  <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="url(#grad)"
    attr.stroke-dasharray="{{dashArray}}"
  />

Upvotes: 1

Related Questions