Change SVG Height without changing width or making it skew/stretch

I wanted a cylindrical container containing liquid and this liquid changes color and its amount in that container, So I used SVG for this purpose (SVG is used for liquid in a cylindrical container).

Here is the source code along with SVG

function changeCol(col) {
  document.querySelector('path').style.setProperty('fill', col, '!important');
  document.querySelector('ellipse').style.setProperty('fill', col, '!important');
  //Its not working I dont know why.
}

function changeHeight(vol) {
  //Some Code to change its height.
}
.container {
  width: fit-content;
  border: solid red;
}

.liquid {
  width: 200px;
}

.liquid svg * {
  fill: red !important;
}
<div class="container">
  <div class="liquid">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.66 325.25">
    <title>liquid_RBt</title>
    <path d="M216.66,28V297.25c0,15.47-48.5,28-108.33,28S0,312.72,0,297.25V28C0,43.46,48.5,56,108.33,56S216.66,43.46,216.66,28Z" style="fill:#fff;stroke:#fff;stroke-miterlimit:10;opacity:0.7000000000000001"/>
    <ellipse cx="108.33" cy="28" rx="108.33" ry="28" style="fill:#fff;stroke:#fff;stroke-miterlimit:10;opacity:0.8"/>
    </svg>
  </div>
</div>
<div class="controller">
  <div class="color-change">
    <button class="col-btn" onclick="changeCol('red');">Red</button>
    <button class="col-btn" onclick="changeCol('blue');">Blue</button>
    <button class="col-btn" onclick="changeCol('green');">green</button>
  </div>
  <div class="change-amount">
    <input type="number" id="amountInp" onchange='changeHeight(this.value)' placeholder="(in ml)">
  </div>
</div>

Answer

I’ve clipped the path with a clipPath that I then move about to hide the parts of the polygon that need to disappear.

I don’t know the volume of the cylinder either so you might want to scale the number.

I also fixed the colouring.

function changeCol(col) {
  document.querySelector('path').style.setProperty('fill', col);
  document.querySelector('ellipse').style.setProperty('fill', col);
}

function changeHeight(vol) {
  // not sure how much 100ml is supposed to fill up
  document.querySelector('ellipse').cy.baseVal.value = 300 - vol;
  document.querySelector('rect').y.baseVal.value = 300-vol;
}
.container {
  width: fit-content;
  border: solid red;
}

.liquid {
  width: 200px;
}
<div class="container">
  <div class="liquid">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.66 325.25">
    <title>liquid_RBt</title>
    <defs>
      <clipPath id="cp">
          <rect x="0" y="0" width="230" height="400"/>
      </clipPath>
    </defs>
    <path d="M216.66,28V297.25c0,15.47-48.5,28-108.33,28S0,312.72,0,297.25V28C0,43.46,48.5,56,108.33,56S216.66,43.46,216.66,28Z" style="fill:red;stroke:#fff;stroke-miterlimit:10;opacity:0.7000000000000001;clip-path: url(#cp)"/>
    <ellipse cx="108.33" cy="28" rx="108.33" ry="28" style="fill:red;stroke:#fff;stroke-miterlimit:10"/>
    </svg>
  </div>
</div>
<div class="controller">
  <div class="color-change">
    <button class="col-btn" onclick="changeCol('red');">Red</button>
    <button class="col-btn" onclick="changeCol('blue');">Blue</button>
    <button class="col-btn" onclick="changeCol('green');">green</button>
  </div>
  <div class="change-amount">
    <input type="number" id="amountInp" onchange='changeHeight(this.value)' placeholder="(in ml)">
  </div>
</div>