它应该有一个完整的灰色环。填充百分比指示应为另一种颜色，例如绿色。
例如：如果指示为60％，则戒指的初始60％应该为绿色，其余40％为默认灰色。
现在主要查询出现在我们需要填充百分比指示的2种颜色（蓝色和绿色）渐变中。
对于上面相同的示例，对于60％的指示，我们应该将初始填充的30％变为蓝色，其余的30％填充为绿色，其余40％设置为默认灰色。
类似地，对于90％的指示=> 30％蓝色+ 60％绿色+ 10％灰色。
我已经尝试过使用svg使用线性渐变，但无法实现仅沿顺时针方向最多覆盖30％的蓝色（目前在两侧都有）。您可以看到60％也有混合色我不想要的蓝色。
所以我想知道如何仅从顺时针方向开始使指示条跨度达到30％，但不应跨环的左侧和右侧。您可以在下面的我的代码段结果中看到此行为。
此外，我还需要使环形动画在IE中工作，并且目前它在chrome中工作，而不是IE。
请让我知道是否有更好/简单的方法来实现这种外观。
.ec-custom-percent-container {
background: #f5f5f5;
}
.ec-custom-percent-container .ec-custom-inner {
margin: 10px auto;
}
.ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart {
width: 110px;
height: 110px;
}
.ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart .ec-custom-percentage {
font-size:10px;
color:black;
fill: black;
text-anchor: middle;
}
.ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart .ec-custom-text{
font-size:3px;
color:black;
fill: black;
text-anchor: middle;
}
.ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart .ec-custom-circle-bg {
fill: none;
stroke: #c9c9c9;
stroke-width: 3.8;
}
.ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart .ec-custom-circle {
fill: none;
stroke-width: 3.6;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
}
.ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart .ec-custom-percentage {
text-anchor: middle;
}
.ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart .ec-custom-text {
text-anchor: middle;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart.ec-custom-fill .ec-custom-circle {
stroke: url(#gradient);
}<div class="ec-custom-percent-container">
<div class="ec-custom-inner">
<svg viewBox="0 0 36 36" class="ec-custom-circular-chart ec-custom-fill">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1b5fcd" />
<stop offset="30%" stop-color="#17b68a" />
<stop offset="100%" stop-color="#17b68a" />
</linearGradient>
</defs>
<path class="ec-custom-circle-bg"
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 class="ec-custom-circle"
stroke-dasharray="90,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="20.35" class="ec-custom-percentage">90%</text>
<text x="17" y="24" class="ec-custom-text">Match</text>
</svg>
</div>
</div>