SVG 角度中未引用渐变 url答案

【问题标题】：Gradient url not referenced in SVG angularSVG 角度中未引用渐变 url
【发布时间】：2021-06-13 21:05:00
【问题描述】：

我正在尝试使用这个渐变，我的组件目前位于我的应用程序的根目录中，我尝试像某些解决方案一样将 <base href="/"> 放入索引中，并且还尝试了 APP_BASE_HREF 但没有这两个似乎工作。我不需要指定路径，因为这个路径已经在 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>

【问题讨论】：

我已经在里面尝试过了，但没有任何作用，仍然不起作用@RobertLongson

标签： angular svg

【解决方案1】：

我不太了解 SVG，而且我不确定我是否正确地遵循了这个问题，有关您打算如何使用渐变的更多信息会很有用。但是似乎没有其他人回答，这可能会有所帮助。根据W3S，需要将填充设置为url(#id-of-gradient)。

例如

  <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}}"
  />

【讨论】：

但是 OP 已经通过 stroke="url(#grad)"
对不起，我必须对此感到困惑。 MB

【解决方案2】：

线性渐变中的错字：lineargradient 应该是 linearGradient，因为它区分大小写

【讨论】：