How make svg path fill as progressing animation?

Question

Is there any solution to show the battery frame red:fill as progress filling without covering the rect ?

$(document).ready( function() {
   $("#iambutton").click(function () {
     console.log("hi");
    $(".mysvg").addClass( 'me' );
   });
});

.mysvg {
  text-align: center;
}
.mysvg svg {
  margin: auto;
}
.mysvg svg #loading-frame {
  fill: red;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 10s;
  transition: all 10s;
}
.mysvg.me svg #loading-frame {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="iambutton">Clik me to see progress</button>
<section class="mysvg">
  <svg width="110px" height="88px" viewBox="0 0 110 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mysvg">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g id="Group" fill="#EAEAEA">
        <rect id="Brick-4" x="77.5" y="10" width="13.5" height="68" rx="3"></rect>
        <rect id="Brick-3" x="56" y="10" width="13.5" height="68" rx="3"></rect>
        <rect id="Brick-2" x="34.5" y="10" width="13.5" height="68" rx="3"></rect>
        <rect id="Brick-1" x="13" y="10" width="13.5" height="68" rx="3"></rect>
        <path id="Rectangle-7" d="M104,30.2724875 C104.164709,30.2576038 104.331485,30.25 104.5,30.25 C107.537566,30.25 110,32.7220822 110,35.7458573 L110,53.1708094 C110,56.2060875 107.531385,58.6666667 104.5,58.6666667 C104.331455,58.6666667 104.164681,58.6590557 104,58.6441617 L104,82.0033234 C104,85.3151964 101.311488,88 97.9970362,88 L6.0029638,88 C2.68761844,88 0,85.3182852 0,82.0033234 L0,5.99667663 C0,2.68480358 2.68851188,0 6.0029638,0 L97.9970362,0 C101.312382,0 104,2.68171476 104,5.99667663 L104,30.2724875 L104,30.2724875 Z M5,10.991014 C5,7.68226832 7.68678744,5 11.0051618,5 L92.9948382,5 C96.3113975,5 99,7.68493655 99,10.991014 L99,77.008986 C99,80.3177317 96.3132126,83 92.9948382,83 L11.0051618,83 C7.68860254,83 5,80.3150634 5,77.008986 L5,10.991014 Z"></path>
        <path d="M104,30.2724875 C104.164709,30.2576038 104.331485,30.25 104.5,30.25 C107.537566,30.25 110,32.7220822 110,35.7458573 L110,53.1708094 C110,56.2060875 107.531385,58.6666667 104.5,58.6666667 C104.331455,58.6666667 104.164681,58.6590557 104,58.6441617 L104,82.0033234 C104,85.3151964 101.311488,88 97.9970362,88 L6.0029638,88 C2.68761844,88 0,85.3182852 0,82.0033234 L0,5.99667663 C0,2.68480358 2.68851188,0 6.0029638,0 L97.9970362,0 C101.312382,0 104,2.68171476 104,5.99667663 L104,30.2724875 L104,30.2724875 Z M5,10.991014 C5,7.68226832 7.68678744,5 11.0051618,5 L92.9948382,5 C96.3113975,5 99,7.68493655 99,10.991014 L99,77.008986 C99,80.3177317 96.3132126,83 92.9948382,83 L11.0051618,83 C7.68860254,83 5,80.3150634 5,77.008986 L5,10.991014 Z"
        id="loading-frame"></path>
      </g>
    </g>
  </svg>
</section>

Answer 1

You can make, in a javascript file, a function like this:

$(document).ready( function() {
   $("#iambutton").clickenter code here(function () {
     console.log("hi");
    $(".mysvg").addClass( 'me' );
    document.getElementByID('mysvg').fill('red')
   });
});

Answer 2

It would be a lot easier if you drew the shape with a single path as you could then animate a single gradient to fill it. Alternatively you can extend what I've shown below to have one gradient per element with different start times and durations. I've only done two objects, you could extend the concept to the others if you want. If you want IE support, use fakeSmile.

$(document).ready( function() {
   $("#iambutton").click(function () {
    $("#a1")[0].beginElement();
    $("#a2")[0].beginElement();
    $("#a3")[0].beginElementAt(3);
    $("#a4")[0].beginElementAt(3);
   });
});

.mysvg {
  text-align: center;
}
.mysvg svg {
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="iambutton">Clik me to see progress</button>
<section class="mysvg">
  <svg width="110px" height="88px" viewBox="0 0 110 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mysvg">
    <defs>
      <linearGradient id="g1">
        <stop offset="0%" stop-color="red">
           <animate id="a1" attributeName="offset" 
             from="0%" to="100%" dur="5s" fill="freeze" begin="indefinite" />
        </stop>
        <stop offset="0%" stop-color="#EAEAEA">
           <animate id="a2" attributeName="offset" 
             from="0%" to="100%" dur="5s" fill="freeze" begin="indefinite" />
        </stop>
      </linearGradient>
      <linearGradient id="g2">
        <stop offset="0%" stop-color="red">
           <animate id="a3" attributeName="offset" 
             from="0%" to="100%" dur="1s" fill="freeze" begin="indefinite" />
        </stop>
        <stop offset="0%" stop-color="#EAEAEA">
           <animate id="a4" attributeName="offset" 
             from="0%" to="100%" dur="1s" fill="freeze" begin="indefinite" />
        </stop>
      </linearGradient>
    </defs>
          
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g id="Group" fill="#EAEAEA">
        <rect id="Brick-4"  fill="url(#g2)" x="77.5" y="10" width="13.5" height="68" rx="3"></rect>
        <rect id="Brick-3" x="56" y="10" width="13.5" height="68" rx="3"></rect>
        <rect id="Brick-2" x="34.5" y="10" width="13.5" height="68" rx="3"></rect>
        <rect id="Brick-1" x="13" y="10" width="13.5" height="68" rx="3"></rect>
        <path id="Rectangle-7" fill="url(#g1)" d="M104,30.2724875 C104.164709,30.2576038 104.331485,30.25 104.5,30.25 C107.537566,30.25 110,32.7220822 110,35.7458573 L110,53.1708094 C110,56.2060875 107.531385,58.6666667 104.5,58.6666667 C104.331455,58.6666667 104.164681,58.6590557 104,58.6441617 L104,82.0033234 C104,85.3151964 101.311488,88 97.9970362,88 L6.0029638,88 C2.68761844,88 0,85.3182852 0,82.0033234 L0,5.99667663 C0,2.68480358 2.68851188,0 6.0029638,0 L97.9970362,0 C101.312382,0 104,2.68171476 104,5.99667663 L104,30.2724875 L104,30.2724875 Z M5,10.991014 C5,7.68226832 7.68678744,5 11.0051618,5 L92.9948382,5 C96.3113975,5 99,7.68493655 99,10.991014 L99,77.008986 C99,80.3177317 96.3132126,83 92.9948382,83 L11.0051618,83 C7.68860254,83 5,80.3150634 5,77.008986 L5,10.991014 Z"></path>

      </g>
    </g>
  </svg>
</section>

Answer 3

Changing your SVG a bit you can make it work.

Instead of using rect to make the battery levels, let them as "holes" in your battery, so you can animate a rect under it and it will look like it's filling the levels.

Something like this:

$(document).ready( function() {
   $("#iambutton").click(function () {
     console.log("hi");
    $(".mysvg").addClass( 'me' );
   });
});

.mysvg {
  text-align: center;
}
.mysvg svg {
  margin: auto;
}
.mysvg svg #loading-frame {
  fill: red;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 10s;
  transition: all 10s;
}
.mysvg.me svg #loading-frame {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="iambutton">Clik me to see progress</button>
<section class="mysvg">
  <svg width="110px" height="88px" viewBox="0 0 110 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mysvg">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  <g id="Group" fill="#EAEAEA">
   <rect id="loading-frame" x="0" y="0" width="110" height="88" fill="red" />
   <path d="M0 0 h110 v88 h-110z
M77.5 10 h13.5 v68 h-13.5z
M56 10 h13.5 v68 h-13.5z
M34.5 10 h13.5 v68 h-13.5z
M13 10 h13.5 v68 h-13.5z" fill="black" />
  </g>
</g>
  </svg>
</section>

Wait a few seconds after the click and you will see the white area being filled by red.

Sorry by the really simple SVG, but it would take more time to redraw the whole battery, you can see more about this way of making "holes" in How to cut a hole in an SVG rectangle