획 효과가 있는 SVG 그라디언트
P粉193307465
P粉193307465 2023-08-29 09:30:52
0
1
501
<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>
P粉193307465
P粉193307465

모든 응답(1)
P粉908643611

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

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

으아악 으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!