Как установить различные цвета в разных частях штриха в html SVG

Question

Как я могу добиться чего-то подобного с помощью SVG?

Answer 1

Вам потребуется два разных circle элементов, один для базового серого цвета, а другие для синего хода, а затем применить stroke-dasharray и stroke-dashoffset к синему инсульту.

.track, 
 
.filled { 
 
    stroke-width: 10; 
 
    fill: none; 
 
} 
 

 
.track { 
 
    stroke: #eee; 
 
} 
 

 
.filled { 
 
    stroke: blue; 
 
    stroke-dashoffset: 110; 
 
    stroke-dasharray: 440; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 190"> 
 
    <circle class="track" cx="80" cy="80" r="70" /> 
 
    <circle class="filled" cx="80" cy="80" r="70" /> 
 
</svg>