Частично заполнить элемент SVG, установив значение

Question

Я пытаюсь создать интерактивную панель здоровья в моем интерфейсе SVG. Идея очень проста: предположим, у нас есть 100 л.с., тогда элемент полностью красный, если у нас 50 л.с., элемент наполовину красный.
Вот код элемента панели состояния SVG:

 <g id="health">
    <path d="M896.4,1306A640.84,640.84,0,0,1,624.63,531.87H825.44A575.33,575.33,0,0,0,758,644.49a572.13,572.13,0,0,0-4.39,461.89,577.14,577.14,0,0,0,126.64,184.31Q888.18,1298.5,896.4,1306Z" transform="translate(-537.36 -66.14)" /> </g>

CSS:

#health {
  fill: white;
  height: 20%;
}

JS:

// Finding element by id
let health = document.getElementById('health');
let hp = 100;

// Controlling the element
health.onclick = function () {
  health.style.fill = 'red';
};

Для теперь все, что у меня есть, это просто управление цветом при нажатии, я хочу, чтобы было значение цифры 1029 *, которое будет управлять CSS свойством заполнения, но я не знаю, как это сделать. Я пытаюсь получить следующую картину:

Красный цвет - это тот, которым я буду управлять sh.

Спасибо,
Лиана

ОБНОВЛЕНИЕ: полная версия https://github.com/liana-webdev/dog_interface

Answer 1

Вы можете использовать linearGradient для этого. Нам нужны две остановки градиента в одном месте для резкого изменения цвета.

// Finding element by id
let health = document.getElementById('health');
let c = document.getElementById('g').children;
let hp = 20;

// Controlling the element
health.onclick = function () {
  let pct = hp / 100;
  c[1].offset.baseVal = c[2].offset.baseVal = pct;
};

<svg viewBox="-400 300 1800 1800">
 <defs>
   <linearGradient id="g" x2="0" y1="100%" y2="0%">  
      <stop offset="0" stop-color="red"/>
      <stop offset="0.5" stop-color="red"/>
      <stop offset="0.5" stop-color="black"/>  
    </linearGradient>
  </defs>
  <g id="health">
    <path id="health" d="M896.4,1306A640.84,640.84,0,0,1,624.63,531.87H825.44A575.33,575.33,0,0,0,758,644.49a572.13,572.13,0,0,0-4.39,461.89,577.14,577.14,0,0,0,126.64,184.31Q888.18,1298.5,896.4,1306Z" transform="translate(-537.36 -66.14)" fill="url(#g)"/> </g>
</svg>