描边效果的SVG渐变

Question

<p>我发现了可能的代码</p> <pre class="brush:php;toolbar:false;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 34 34"> <圆cx＝“16” cy＝“16” r＝“15.9155”类=“进度条__背景” >> <圆cx＝“16” cy＝“16” r＝“15.9155” class="progress-bar__progress js-progress-bar"/> </svg></pre>

$progress-bar-lines-width: 1.8;
$进度条大小：300px；

svg {
  高度：$进度条大小；
  变换：旋转（-90度）；
  宽度：$进度条大小；
}

.progress-bar__background {
  填充：无；
  中风：#e2eff0；
  笔画宽度：$progress-bar-笔画宽度；
}

.progress-bar__progress {
  填充：无；
  中风：#78bec7；
  笔画破折号数组：100 100；
  笔划-dashoffset：100；
  笔划线帽：圆形；
  笔画宽度：$progress-bar-笔画宽度；
  过渡：行程-dashoffset 1s 缓入出；
}</pre>
var 完成百分比 = 0.6;
var strokeDashOffsetValue = 100 - (percentageComplete * 100);
var ProgressBar = $(".js-progress-bar");
ProgressBar.css(“Stroke-dashOffset”,StrokeDashOffsetValue);</pre>
<p>但是我不知道如何处理svg，有人可以帮我吗，如何将那个蓝绿色替换成替换颜色，像圆锥渐变（红色，黄色，绿色 - 无意的这种透明颜色）？ </ p>

Answer 1

在SVG中，您可以使用<linearGradient>和<radialGradient>。您正在创建一个进度条，所以根据布局，径向渐变可能是创建“锥形渐变”（加引号！）的选项，但是使用起来真的很烦人。

一个很好的替代内置渐变的方法可能是结合SVG和CSS。您可以将CSS样式应用于嵌入的SVG元素。只要您只需要一个可应用于SVG元素的锥形渐变，然后进行遮罩，以便它只显示在描边或其他地方。这是一个示例：

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>