Dynamic battery recharge icon

Dear Guru：
 I want to create a dynamic battery charge icon to show the percentage charged in a green color from the bottom, and the percentage remaining should have a white color.  I've read below posts to learn to create retangle on top of battery icon, and try to use clip-path to dynamiclly control  the height of the topest white retangle, but it doesn't work.  could you please help me out ?

below is the Battery SVG icon which I want to use in my case：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="509.662px" height="509.662px" viewBox="0 0 509.662 509.662" style="enable-background:new 0 0 509.662 509.662;" xml:space="preserve">
<g>
<path d="M344.675,29.403h-39.401V0H202.355v29.403h-37.371c-24.329,0-44.104,19.786-44.104,44.106v392.046 c0,24.317,19.78,44.106,44.104,44.106h179.69c24.328,0,44.105-19.789,44.105-44.106V73.51 C388.781,49.189,369.003,29.403,344.675,29.403z M359.38,465.562c0,8.104-6.596,14.7-14.712,14.7H164.985 c-8.11,0-14.706-6.585-14.706-14.7V73.51c0-8.104,6.596-14.703,14.706-14.703h179.69c8.109,0,14.705,6.599,14.705,14.703V465.562 L359.38,465.562z"/>
</g>
</svg>

Solved: SVG measure incorrect - Microsoft Fabric Community