Question

如何使用jquery或css和SVG创建带有水的容器，如进度条？

Answer 1

我已经提出了一些基本想法：

JS

$(document).ready(function(){
    $('button').on('click',function(){  
        $('#container, .water, .water2').animate({       
            height: "200px"       
        }, 5000);  
    });
});

HTML

<button>click</button>
<div id="container">
    <div class="water"></div>
    <div class="water2"></div>
</div>

CSS

button {
    margin-bottom:40px;
}

#container {
    height:0px;
    width:200px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.water {
    height:inherit;
    width:100px;
    background:lightblue;
    transform:skewX(10deg);
    margin-left:20px;
    position:absolute;
}

.water2 {
    height:inherit;
    width:100px;
    background:lightblue;
    transform:skewX(-10deg);
    margin-left:60px;
    position:absolute;
}

Fiddle

Answer 2

尝试使用canvas

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "2";
ctx.moveTo(25, 25);
ctx.lineTo(50, 100);
ctx.lineTo(100, 100);
ctx.lineTo(125, 25);
ctx.lineTo(24.25, 25);
ctx.stroke();
ctx.font = "18px monospace";
ctx.fillText("< 0%", 120, 106);
ctx.fillText("< 50%", 130, 70);
ctx.fillText("< 100%", 145, 32);
ctx.strokeStyle = "skyblue";
ctx.lineWidth = 1;
var x = 51, y = 98, l = 100;
for (var i = 0; i < 72; i++) { 
  setTimeout(function() {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(l, y);
    x -= .34; y -= 1; l += .33;
    ctx.stroke();
  }, i * 100)
}

<canvas id="canvas" width="300" height="150"></canvas>

Answer 3

我创建了一个在玻璃周围有白色层的SVG，以防止填充物重叠。然后我创建了一个简单的函数来设置进度，它只是在用作填充的SVG中的多边形元素上设置translateY属性。 SVG的视图框高度为100，因此可以轻松使用百分比值进行进度。

http://jsfiddle.net/7op7re9j/3/

<强> JS

    function setProgress(percent) {
       if(percent > 100) percent = 100;
       if(percent < 0) percent = 0;
       var translate = "translateY("+(100-percent)+"px)";
       $('.progress').css({
           "transform":translate,
           "-webkit-transform":translate
       });
}

<强> SVG

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 70 100" enable-background="new 0 0 70 100" xml:space="preserve">
<polygon class="progress" x="0px" y="10px" fill="#3094D1" points="60.8,98 7.1,98 2.1,5.4 67.9,5.4 "/>
<polygon fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="60.8,98.7 7.1,98.7 2.1,6 67.9,6 "/>
<path class="background" fill="#FFFFFF" d="M0,0v100h70V0H0z M60.8,98.7H7.1L2.1,6h65.9L60.8,98.7z"/>
</svg>

具有自定义SVG形状的垂直进度条

3 个答案: