根據線性漸變中的顏色更改 SVG 圓形進度條筆划

Question

我正在嘗試使用 CSS 和 JavaScript（也做出反應）根據線性漸變的進度/百分比使 SVG 圓形進度條改變顏色。

到目前為止，我找到的每個解決方案都有硬編碼的顏色代碼或使用我無法使用的 jQuery。 我的代碼和 CSS 如下。

  <svg viewBox="0 0 36 36" className="circular-chart">
  <path className="svg-back"
    fill='none'
    stroke={props.theme.colors.Neutral.Gray1}
    strokeWidth={3}
    d="M18 2.0845
  a 15.9155 15.9155 0 0 1 0 31.831
  a 15.9155 15.9155 0 0 1 0 -31.831"
  />
  <path className="circle"
    stroke-dasharray={`${props.percentage} 100`}
    d="M18 2.0845
  a 15.9155 15.9155 0 0 1 0 31.831
  a 15.9155 15.9155 0 0 1 0 -31.831"
  />

  <text
    x={18}
    y={21}
    className="svg-circle-text">
    {props.percentage}%
  </text>
</svg>

CSS：

    .svg-circle-text {
      font-size: 0.5rem;
      text-anchor: middle;
      fill: ${theme.colors.Primary.Black}
      font-weight: bold;
  }

  .circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 80%;
    max-height: 250px;
  }
  
  .circle {
    stroke: #99DA98;
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
  }
  
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
    }
  }

在另一個組件中，我有以下背景，它是這個圓形進度條的一種關鍵：

 background: linear-gradient(
      90deg,
      #99da98 0%,
      #f8b66a 51.56%,
      #cf6767 100%
    );

因此，如果百分比是 60%，它應該顯示 60% 的梯度值。 一點幫助將不勝感激。 謝謝。

Answer 1

因此，在 A Haworth 留下的評論的幫助下，我搜索了 rgb 算術解決方案，並幾乎完全找到了我在這個答案中所需要的。 hsl 也是一種選擇，但 rgb 聽起來很簡單。 通過以下代碼（來自另一個問題）的一些更改，我能夠實現我想要的。

function getGreenToRed(percent){
            r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);
            g = percent>50 ? 255 : Math.floor((percent*2)*255/100);
            return 'rgb('+r+','+g+',0)';
        }