更改CSS以允許使用Javascript控制DIV位置

Question

我已經從此頁面改編了代碼： 填充水動畫可以滿足我的需求，如下所示。

的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>

也...

請在此處查看輸出的屏幕截圖。

但是，我想更進一步，並通過javascript函數控制“水”的填充水平。

通常，我只控制包含揮舞着的SVG的DIV的X和Y位置，但是在這里似乎不起作用。

我想將其用作加載圖表，但目前我只能使用...來控制“水位”

}
#banner .fill {
    -webkit-transform: translate(0, -75px);
}

我可以使用0px（0％）到-155px（100％）的值，但理想情況下，我希望能夠設置百分比，也許可以通過傳入一個變量來實現？

注意：我已經旋轉了原始的SVG，因為我正努力創建一個可以正常工作的新SVG。

任何幫助將不勝感激，我知道當我看到解決方案的時候我會踢自己！ 謝謝。

Answer 1

擺脫.rotate和#banner .fill轉換如果給svg一個ID，則可以使用％來調整svg的上邊距，例如

    el.style.marginTop = "75%";

工作示例：（經過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>

如果這樣不起作用，您可以嘗試在svg之前插入一個空div並調整其高度。