Q:

Change CSS to allow for control over DIV position using Javascript

I have adapted code from this page: Filling water animation to suit my needs as you can see below.
CSS
#banner {
    width: 150px;
    height: 150px;
    background:red;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
}
.rotate {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
#banner .fill {
    -webkit-transform: translate(0, -75px);
}
#banner #waveShape {
    -webkit-animation-name: waveAction;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 1s;
    width:300px;
    height: 155px;
    opacity:0.9;
    fill: #fff;
@-webkit-keyframes waveAction {
    0% {
        -webkit-transform: translate(150px,0);
    }
    100% {
        -webkit-transform: translate(0, 0);
    }
}

HTML
<div id="banner">
<div class="fill">
    <svg class="rotate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="155px" viewBox="0 0 300 155" enable-background="new 0 0 300 155" xml:space="preserve">
      <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
    c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
    c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
    </svg>
</div>
</div>

Also...
Please see a screenshot of the output here.
However, I'd like to go one step further and control the level the 'water' is filled via a javascript function.
Usually, I would just control the X and Y position of the DIV that contains the waving SVG but that doesn't appear to work here.
I'd like to use this as a loading infographic but at the moment I can only control the 'water' level using...
}
#banner .fill {
    -webkit-transform: translate(0, -75px);
}

I can use values of 0px (0%) to -155px (100%) but ideally I'd like to be able to set a percentage, perhaps by passing a variable in??
NOTE: I've rotated the original SVG because I was struggling to create a new one that worked correctly.
Any help would be much appreciated, I know I'm going to kick myself when I see the solution!! Thankyou.

A:

Get rid of the .rotate and #banner .fill transforms
If you give the svg an id, you can adjust the top margin of the svg using a %
eg
    el.style.marginTop = "75%";

Working example: (tested in chrome)
<style type="text/css">
#banner {
    width: 150px;
    height: 150px;
    background:red;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
}
#water {
    margin-top: 99%;
}
#banner #waveShape {
    -webkit-animation-name: waveAction;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 1s;
    animation-name: waveAction;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 1s;
    width:300px;
    height: 155px;
    opacity:0.9;
    fill: #fff;
}
@keyframes waveAction {
    0% {
        -webkit-transform: translate(-150px,0);
        transform: translate(-150px,0);
    }
    100% {
        -webkit-transform: translate(150, 0);
        transform: translate(150, 0);
    }
}
</style>
<script>
function fill(percent) {
    var el=document.getElementById("water");
    if (el == null) {
        alert("missing element");
        return;
    }
    el.style.marginTop = (100-percent)+"%";
}
</script>
<div id="banner">
<div class="fill">
    <svg id="water" class="rotate" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="155px" viewBox="0 0 300 155" enable-background="new 0 0 300 155" xml:space="preserve">
      <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
    c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
    c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
    </svg>
</div>
</div>

<script>
fill(25); //set fill to 25%
</script>

If that doesn't work you could try simply inserting an empty div before the svg and adjusting the height of that.

