Как менять цвет svg

Question

У меня есть картинка, как при помощи js менять fill-opacity с 0.4 до 0.9 , то есть , если в переменной допустим стоит 50 , то закрашены будут половина полосочек , если 100 , то будут закрашены все полосочки?

body {
   background-color: black;
}

<svg width="64" height="24" viewBox="0 0 64 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="59" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 59 23.25)" fill="white" fill-opacity="0.9"/>
         <rect x="52.5" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 52.5 23.25)" fill="white" fill-opacity="0.9"/>
         <rect x="46" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 46 23.25)" fill="white" fill-opacity="0.9"/>
         <rect x="39.5" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 39.5 23.25)" fill="white" fill-opacity="0.9"/>
         <rect x="33" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 33 23.25)" fill="white" fill-opacity="0.9"/>
         <rect x="26.5" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 26.5 23.25)" fill="white" fill-opacity="0.9"/>
         <rect x="20" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 20 23.25)" fill="white" fill-opacity="0.9"/>
         <rect x="13.5" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 13.5 23.25)" fill="white" fill-opacity="0.4"/>
         <rect x="7" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 7 23.25)" fill="white" fill-opacity="0.4"/>
         <rect x="0.5" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 0.5 23.25)" fill="white" fill-opacity="0.4"/>
      </svg>

Answer 1

Можно выбрать все rect с помощью .querySelectorAll, затем пробежаться по ним в цикле и выставить нужный атрибут.

Установить атрибут можно с помощью setAttribute:

первый параметр - имя атрибута
второй - значение

Например

.setAttribute('fill-opacity', 0.4)
.setAttribute('fill-opacity', 0.9)

function change(val) {
  document.querySelectorAll('rect').forEach((r, i) => r.setAttribute('fill-opacity', i < val ? 0.9 : 0.4));
}

body {
  background-color: black;
}

#o {
  color: white;
}

<output id="o">7</output><input type="range" min="0" max="10" value="7" step="1" oninput="change(this.value); o.value=this.value" />
<svg width="64" height="24" viewBox="0 0 64 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="59" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 59 23.25)" fill="white" fill-opacity="0.9"/>
         <rect x="52.5" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 52.5 23.25)" fill="white" fill-opacity="0.9"/>
         <rect x="46" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 46 23.25)" fill="white" fill-opacity="0.9"/>
         <rect x="39.5" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 39.5 23.25)" fill="white" fill-opacity="0.9"/>
         <rect x="33" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 33 23.25)" fill="white" fill-opacity="0.9"/>
         <rect x="26.5" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 26.5 23.25)" fill="white" fill-opacity="0.9"/>
         <rect x="20" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 20 23.25)" fill="white" fill-opacity="0.9"/>
         <rect x="13.5" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 13.5 23.25)" fill="white" fill-opacity="0.4"/>
         <rect x="7" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 7 23.25)" fill="white" fill-opacity="0.4"/>
         <rect x="0.5" y="23.25" width="22.5" height="4.5" rx="2.25" transform="rotate(-90 0.5 23.25)" fill="white" fill-opacity="0.4"/>
      </svg>

БЛОГ НА HUSL

Как менять цвет svg

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