title: Partially fill SVG element by setting a value
body: <p>I am trying to make an interactive health bar in my SVG dog interface. Idea is very simple: suppose we have 100hp, then the element is fully red, if we have 50hp, the element is half-red. <br>
  Here is the code of the SVG health bar element: </p>
  
  <pre><code> &lt;g id="health"&gt;
      &lt;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)" /&gt; &lt;/g&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#health {
    fill: white;
    height: 20%;
  }
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>// Finding element by id
  let health = document.getElementById('health');
  let hp = 100;
  
  // Controlling the element
  health.onclick = function () {
    health.style.fill = 'red';
  };
  </code></pre>
  
  <p>For now, all I have is just a color control on click, I want there to be a numeric value that will control CSS fill property, but I don’t know how to do that. I am trying to achieve the following picture: <a href="https://i.stack.imgur.com/iKHd7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iKHd7.png" alt="example of changing bars"></a></p>
  
  <p>The red color is the one I wish to control.</p>
  
  <p>Thank you, <br>
  Liana</p>
  
  <p><strong>UPDATE:</strong> full version <a href="https://github.com/liana-webdev/dog_interface" rel="nofollow noreferrer">https://github.com/liana-webdev/dog_interface</a></p>