[英]Change SVG Circular Progress Bar stroke according to colour in linear gradient
I'm trying to make an SVG circular progress bar change color according to progress/percentage from a linear gradient using CSS and JavaScript (react too).我正在尝试使用 CSS 和 JavaScript(也做出反应)根据线性渐变的进度/百分比使 SVG 圆形进度条改变颜色。
So far, every solution I find has hard coded color codes or using jQuery which I cannot use.到目前为止,我找到的每个解决方案都有硬编码的颜色代码或使用我无法使用的 jQuery。 My code and CSS is following.
我的代码和 CSS 如下。
<svg viewBox="0 0 36 36" className="circular-chart">
<path className="svg-back"
fill='none'
stroke={props.theme.colors.Neutral.Gray1}
strokeWidth={3}
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path className="circle"
stroke-dasharray={`${props.percentage} 100`}
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<text
x={18}
y={21}
className="svg-circle-text">
{props.percentage}%
</text>
</svg>
CSS: CSS:
.svg-circle-text {
font-size: 0.5rem;
text-anchor: middle;
fill: ${theme.colors.Primary.Black}
font-weight: bold;
}
.circular-chart {
display: block;
margin: 10px auto;
max-width: 80%;
max-height: 250px;
}
.circle {
stroke: #99DA98;
fill: none;
stroke-width: 3;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
In another component, I have the following background which serves as kind of a key to this circular progress bar:在另一个组件中,我有以下背景,它是这个圆形进度条的一种关键:
background: linear-gradient(
90deg,
#99da98 0%,
#f8b66a 51.56%,
#cf6767 100%
);
So if the percentage is, say, 60%, it should show the value of the gradient at 60%.因此,如果百分比是 60%,它应该显示 60% 的梯度值。 A little help would be appreciated.
一点帮助将不胜感激。 Thanks.
谢谢。
So with the help of a comment left by A Haworth, I searched for rgb arithmetic solutions and found almost exactly what I required in this answer.因此,在 A Haworth 留下的评论的帮助下,我搜索了 rgb 算术解决方案,并几乎完全找到了我在这个答案中所需要的。 hsl was also an option but rgb sounded simple enough.
hsl 也是一种选择,但 rgb 听起来很简单。 with some changes in the following code (from the other question) i was able to achieve what I wanted.
通过以下代码(来自另一个问题)的一些更改,我能够实现我想要的。
function getGreenToRed(percent){
r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);
g = percent>50 ? 255 : Math.floor((percent*2)*255/100);
return 'rgb('+r+','+g+',0)';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.