https://community.fabric.microsoft.com/t5/Custom-Visuals-Development/Dynamic-battery-recharge-icon/m-p/3260753#M10016 <P>Dear Guru：<BR />&nbsp;I want to create a dynamic battery charge icon to show&nbsp;<SPAN>the percentage charged in a green color from the bottom, and the percentage remaining should have a white color.&nbsp; I've read below posts to learn to create retangle on top of battery icon, and try to use clip-path to dynamiclly control&nbsp; the height of the topest white retangle, but it doesn't work.&nbsp; could you please help me out ?<BR /><BR /><STRONG>below is the Battery SVG icon which I want to use in my case：</STRONG><BR /><BR /></SPAN></P><P>&lt;svg xmlns="<A href="http://www.w3.org/2000/svg" target="_blank">http://www.w3.org/2000/svg</A>" xmlns:xlink="<A href="http://www.w3.org/1999/xlink" target="_blank">http://www.w3.org/1999/xlink</A>" 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"&gt;<BR />&lt;g&gt;<BR />&lt;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"/&gt;<BR />&lt;/g&gt;<BR />&lt;/svg&gt;<BR /><BR /><A href="https://community.fabric.microsoft.com/t5/Desktop/SVG-measure-incorrect/td-p/2415002" target="_blank">Solved: SVG measure incorrect - Microsoft Fabric Community</A><BR /><BR /></P> Wed, 31 May 2023 02:46:35 GMT tonny_bwg 2023-05-31T02:46:35Z https://community.fabric.microsoft.com/t5/Custom-Visuals-Development/Dynamic-battery-recharge-icon/m-p/3260753#M10016 <P>Dear Guru：<BR />&nbsp;I want to create a dynamic battery charge icon to show&nbsp;<SPAN>the percentage charged in a green color from the bottom, and the percentage remaining should have a white color.&nbsp; I've read below posts to learn to create retangle on top of battery icon, and try to use clip-path to dynamiclly control&nbsp; the height of the topest white retangle, but it doesn't work.&nbsp; could you please help me out ?<BR /><BR /><STRONG>below is the Battery SVG icon which I want to use in my case：</STRONG><BR /><BR /></SPAN></P><P>&lt;svg xmlns="<A href="http://www.w3.org/2000/svg" target="_blank">http://www.w3.org/2000/svg</A>" xmlns:xlink="<A href="http://www.w3.org/1999/xlink" target="_blank">http://www.w3.org/1999/xlink</A>" 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"&gt;<BR />&lt;g&gt;<BR />&lt;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"/&gt;<BR />&lt;/g&gt;<BR />&lt;/svg&gt;<BR /><BR /><A href="https://community.fabric.microsoft.com/t5/Desktop/SVG-measure-incorrect/td-p/2415002" target="_blank">Solved: SVG measure incorrect - Microsoft Fabric Community</A><BR /><BR /></P> Wed, 31 May 2023 02:46:35 GMT https://community.fabric.microsoft.com/t5/Custom-Visuals-Development/Dynamic-battery-recharge-icon/m-p/3260753#M10016 tonny_bwg 2023-05-31T02:46:35Z