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
