획 효과가 있는 SVG 그라디언트
P粉193307465
2023-08-29 09:30:52
<p>我发现了这段代码</p>
<pre class="brush:php;toolbar:false;"><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초 완화;
}</pre>
<pre class="brush:php;toolbar:false;">var PercentComplete = 0.6;
var 스트로크DashOffsetValue = 100 - (percentageComplete * 100);
var ProgressBar = $(".js-progress-bar");
ProgressBar.css("Stroke-dashoffset", 스트로크DashOffsetValue);</pre>
<p>但是我不知道如何处理svg，有人可以帮我吗，如何将那个蓝绿color替换成渐变color，image conic-gradient(red, yellow, green - 确切的这三种颜color)?</ p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
SVG에서는
<linearGradient>和<radialGradient>을 사용할 수 있습니다. 진행률 표시줄을 만드는 중이므로 레이아웃에 따라 방사형 그래디언트가 "테이퍼형 그래디언트"(따옴표로 묶음)를 만드는 옵션이 될 수 있지만 사용하기가 정말 불편합니다.내장 그라디언트의 좋은 대안은 SVG와 CSS를 결합하는 것입니다. 포함된 SVG 요소에 CSS 스타일을 적용할 수 있습니다. SVG 요소에 적용할 수 있는 점점 가늘어지는 그라디언트를 원하는 경우 스트로크 등에만 표시되도록 마스크하세요. 예는 다음과 같습니다.