획 효과가 있는 SVG 그라디언트

Question

我发现了这段代码

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="-1 -1 34 34">
  
  <circle cx="16" cy="16"; r="15.9155" class="진행률 표시줄__배경" />
  
  <circle cx="16" cy="16"; r="15.9155" class="progress-bar__progress js-progress-bar"/>

<pre class="brush:php;toolbar:false;">$progress-bar-Stroke-width: 1.8;
$진행 막대 크기: 300px;

svg {
  높이: $진행 막대 크기;
  변환: 회전(-90deg);
  너비: $진행 막대 크기;
}

.progress-bar__배경 {
  채우기: 없음;
  스트로크: #e2eff0;
  스트로크 너비: $progress-bar-스트로크 너비;
}

.progress-bar__progress {
  채우기: 없음;
  뇌졸중: #78bec7;
  스트로크-다샤레이: 100 100;
  획-대시 오프셋: 100;
  스트로크 라인 캡: 원형;
  스트로크 너비: $progress-bar-스트로크 너비;
  전환: 스트로크-대시오프셋 1초 완화;
}

var PercentComplete = 0.6;
var 스트로크DashOffsetValue = 100 - (percentageComplete * 100);
var ProgressBar = $(".js-progress-bar");
ProgressBar.css("Stroke-dashoffset", 스트로크DashOffsetValue);

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

Answer 1

SVG에서는 <linearGradient>和<radialGradient>을 사용할 수 있습니다. 진행률 표시줄을 만드는 중이므로 레이아웃에 따라 방사형 그래디언트가 "테이퍼형 그래디언트"(따옴표로 묶음)를 만드는 옵션이 될 수 있지만 사용하기가 정말 불편합니다.

내장 그라디언트의 좋은 대안은 SVG와 CSS를 결합하는 것입니다. 포함된 SVG 요소에 CSS 스타일을 적용할 수 있습니다. SVG 요소에 적용할 수 있는 점점 가늘어지는 그라디언트를 원하는 경우 스트로크 등에만 표시되도록 마스크하세요. 예는 다음과 같습니다.

으아악 으아악