我需要制作一个带有颜色渐变的圆形进度指示器。我还需要将进度圈的“末端”弄圆。这张图片包含了我想要实现的一切：
此代码很接近，但没有颜色渐变：
https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/OJybqza
var control = document.getElementById('control');
var progressValue = document.querySelector('.progress__value');
var RADIUS = 54;
var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
function progress(value) {
var progress = value / 100;
var dashoffset = CIRCUMFERENCE * (1 - progress);
console.log('progress:', value + '%', '|', 'offset:', dashoffset)
progressValue.style.strokeDashoffset = dashoffset;
}
control.addEventListener('input', function(event) {
progress(event.target.valueAsNumber);
});
progressValue.style.strokeDasharray = CIRCUMFERENCE;
progress(60);.demo {
flex-direction: column;
display: flex;
width: 120px;
}
.progress {
transform: rotate(-90deg);
}
.progress__meter,
.progress__value {
fill: none;
}
.progress__meter {
stroke: grey;
}
.progress__value {
stroke: blue;
stroke-linecap: round;
}<div class="demo">
<svg class="progress" width="120" height="120" viewBox="0 0 120 120">
<circle class="progress__meter" cx="60" cy="60" r="54" stroke-width="12" />
<circle class="progress__value" cx="60" cy="60" r="54" stroke-width="12" stroke="url(#gradient)" />
</svg>
<input id="control" type="range" value="60" />
</div>It looks like this:
我尝试添加一个linear-gradient到中风但没有效果：
stroke: linear-gradient(red, yellow);
我也尝试过stroke="url(#linearColors)"，但也没有影响。
<div class="demo">
<svg class="progress" width="120" height="120" viewBox="0 0 120 120">
<linearGradient id="linearColors" x1="0" y1="0" x2="1" y2="1">
<stop offset="5%" stop-color="#01E400"></stop>
<stop offset="25%" stop-color="#FEFF01"></stop>
<stop offset="40%" stop-color="#FF7E00"></stop>
<stop offset="60%" stop-color="#FB0300"></stop>
<stop offset="80%" stop-color="#9B004A"></stop>
<stop offset="100%" stop-color="#7D0022"></stop>
</linearGradient>
<circle class="progress__meter" cx="60" cy="60" r="54" stroke-width="12" />
<circle class="progress__value" cx="60" cy="60" r="54" stroke-width="12" stroke="url(#linearColors)" />
</svg>
<input id="control" type="range" value="60" />
</div>
https://jsfiddle.net/yzqmvd16/
您可以使用 100 个圆圈（每个圆圈具有不同的填充）来产生渐变的错觉，而不是使用渐变。我正在使用fill-opacity属性来设置元素完全不透明或完全透明。
我希望它有帮助。
const SVG_NS = 'http://www.w3.org/2000/svg';
const CIRCUMFERENCE = base.getTotalLength()
const UNIT = CIRCUMFERENCE / 100;
let circles=[];//the array of circles
//create 100 circles each with a different fill color to create the illusion of a gradient
for(let i = 0; i<100; i++){
let pos = base.getPointAtLength(i*UNIT);
let o = {cx:pos.x,cy:pos.y,r:5.5,'fill-opacity':0,fill:`hsl(220,100%,${50 + (100-i)/2}%)`}
circles.push(drawCircle(o, progress__value));
}
progress();
control.addEventListener('input', progress);
function progress(){
let val = control.valueAsNumber;
for(let i = 0; i<circles.length; i++){
if(i<=val){
circles[i].setAttributeNS(null,'fill-opacity',1)
}else{
circles[i].setAttributeNS(null,'fill-opacity',0)
}
}
}
// a function to create a circle
function drawCircle(o, parent) {
var circle = document.createElementNS(SVG_NS, 'circle');
for (var name in o) {
if (o.hasOwnProperty(name)) {
circle.setAttributeNS(null, name, o[name]);
}
}
parent.appendChild(circle);
return circle;
}svg{border:solid}
.demo {
flex-direction: column;
display: flex;
width: 120px;
}
.progress__meter{
fill: none;
}
.progress__meter {
stroke: grey;
}<div class="demo">
<svg class="progress" viewBox="-2 -2 124 124">
<path class="progress__meter" id="base" d="M60,6A54,54 0 0 1 60,114A54,54 0 0 1 60,6z" stroke-width="12" />
<g id="progress__value"></g>
</svg>
<input id="control" type="range" value="60" />
</div>