我发现了这段代码
1
1120<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 - 确切的这三种颜色)？
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
