SVG gradient with stroke effect

Question

我发现了这段代码

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="-1 -1 34 34">
  
  <circle cx="16" cy="16" r="15.9155" class="progress-bar__background" />
  
  <circle cx="16" cy="16" r="15.9155" class="progress-bar__progress js-progress-bar"/>
</svg>

$progress-bar-stroke-width: 1.8;
$progress-bar-size: 300px;

svg {
  height: $progress-bar-size;
  transform: rotate(-90deg);
  width: $progress-bar-size;
}

.progress-bar__background {
  fill: none;
  stroke: #e2eff0;
  stroke-width: $progress-bar-stroke-width;
}

.progress-bar__progress {
  fill: none;
  stroke: #78bec7;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  stroke-width: $progress-bar-stroke-width;
  transition: stroke-dashoffset 1s ease-in-out;
}

var percentageComplete = 0.6;
var strokeDashOffsetValue = 100 - (percentageComplete * 100);
var progressBar = $(".js-progress-bar");
progressBar.css("stroke-dashoffset", strokeDashOffsetValue);

但是我不知道如何处理svg，有人可以帮我吗，如何将那个蓝绿色替换成渐变色，像conic-gradient(red, yellow, green - 确切的这三种颜色)？

Answer 1

In SVG, you can use <linearGradient> and <radialGradient>. You're creating a progress bar, so depending on the layout, a radial gradient might be an option to create a "tapered gradient" (in quotes!), but it's really annoying to use.

A good alternative to built-in gradients might be to combine SVG and CSS. You can apply CSS styles to embedded SVG elements. As long as you just want a tapered gradient that can be applied to the SVG element, then mask it so it only shows up in the stroke or something. Here is an example:

svg {
  display: block;
  background-image: conic-gradient(from 180deg, green, orange, red);
}

<svg width="300" xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100">
  <defs>
    <mask id="m1">
      <rect width="100" height="100" fill="white" />
      <circle transform="rotate(120 50 50)" cx="50"
        cy="50" r="45" stroke="black" stroke-width="5"
        fill="none" stroke-dasharray="300 360" pathLength="360" />
    </mask>
  </defs>
  <rect width="100" height="100" fill="white" mask="url(#m1)" />
</svg>