¿Cómo podría cambiar los valores de stroke-dasharray
de tal forma que al momento de cambiar su valor cambie de clase y de color?.
Como se muestra en fiddle tengo 3 botones. Al presionar 8 am se ponga al 100% y al presionar 12 pm aparezca 50% y 4 pm al 20% y, de ser posible, el texto de la clase percentage
.
.flex-wrapper {
display: flex;
flex-flow: row nowrap;
}
.single-chart {
width: 33%;
justify-content: space-around ;
}
.circular-chart {
display: block;
margin: 10px auto;
max-width: 80%;
max-height: 250px;
}
.circle-bg {
fill: none;
stroke: #eee;
stroke-width: 3.8;
}
.circle {
fill: none;
stroke-width: 2.8;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.circular-chart.orange .circle {
stroke: #ff9f00;
}
.circular-chart.green .circle {
stroke: #4CC790;
}
.circular-chart.red .circle {
stroke: #e53c3c;
}
.percentage {
fill: #SDFASF;
font-family: sans-serif;
font-size: 0.5em;
text-anchor: middle;
}
<div class="single-chart">
<svg viewBox="0 0 36 36" class="circular-chart red">
<path class="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="circle"
stroke-dasharray="20, 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="percentage">20%</text>
</svg>
</div>
<button class= "circle " type="button" name="" stroke-dasharray="100" onclick="circular-chart green">8:00 AM</button>
<button class= "circle " type="button" name="" stroke-dasharray="50" onclick="circular-chart orange">12:00 pm</button>
<button class= "circle " type="button" name="" stroke-dasharray="20" onclick="circular-chart red">4:00 pm</button>
:focus
de CSS o el eventoonfocus
de Javascript?