Estoy tratando de hacer que una barra de progreso circular SVG cambie de color según el progreso/porcentaje de un degradado lineal usando CSS y JavaScript (reaccionar también).

Hasta ahora, todas las soluciones que encuentro tienen códigos de color codificados o usan jQuery que no puedo usar. Mi código y CSS están siguiendo.

 <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:

 .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; } }

En otro componente, tengo el siguiente fondo que sirve como una especie de clave para esta barra de progreso circular:

 background: linear-gradient( 90deg, #99da98 0%, #f8b66a 51.56%, #cf6767 100% );

Entonces, si el porcentaje es, digamos, 60%, debería mostrar el valor del gradiente en 60%. Un poco de ayuda sería apreciada. Gracias.