Как изменить цвет в stroke c помощью условия на JavaScript?

Question

Подскажите пожалуйста как правильно изменить цвет в stroke?

<svg class="chart" width="120" height="120" viewbox="0 0 50 50">
 <circle class="unit__events" r="20" cx="25" cy="25" stroke = "#27AE60" stroke-width = "3" fill = "transparent"/>
</svg>

Код на JS

const circle = document.querySelector('.unit__events');
const radius = circle.r.baseVal.value;
const circumference = 2 * Math.PI * radius;

circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = circumference;

function setProgress(percent) {
    const offset = circumference - percent / 100 * circumference;
    circle.style.strokeDashoffset = offset;
}

setProgress(100);

как правильно написать условие, что если значение в setProgress - 100, тогда stroke = "#ee0a0a".

думал так получится

if (percent == 100){
 circle.style.stroke = "#ee0a0a"}

Но не получается. Наоборот цвет исчезает.

Answer 1

Но не получается.

А у меня всё получается.

const circle = document.querySelector('.unit__events');
const radius = circle.r.baseVal.value;
const circumference = 2 * Math.PI * radius;

circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = circumference;

function setProgress(percent) {
    const offset = circumference - percent / 100 * circumference;
    circle.style.strokeDashoffset = offset;
    
    
    if (percent == 100){
        circle.style.stroke = "#ee0a0a"
    }
}

setProgress(90);

setTimeout(() => {
    setProgress(100);
}, 2000);

<svg class="chart" width="120" height="120" viewbox="0 0 50 50">
 <circle class="unit__events" r="20" cx="25" cy="25" stroke = "#27AE60" stroke-width = "3" fill = "transparent"/>
</svg>

БЛОГ НА HUSL

Как изменить цвет в stroke c помощью условия на JavaScript?

Ответы (1 шт):