Question

我想创建基于正方形的进度条（例如游戏中的异能）。最近，我遇到了svg，此代码将使您了解我要完成的工作：

$(document).ready(function() {
  $("button").click(function() {
    console.log();

    let x = 100;
    let y = 5;

    var id = setInterval(function() {

      $('#a').attr('points', `0,0 50,0 50,50 ${x},${y} 100,100 0,100 0,0`);
      y++;
      if (y >= 100) {
        x--;
        if (x < 80)
          clearInterval(id);
      }
    }, 30);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg height="100" width="100">
      <polygon  id="a" points="0,0 50,0 50,50 100,0 100,100, 0,100 0,0" style="fill:lime;stroke:purple;stroke-width:1" />
      Sorry, your browser does not support inline SVG.
</svg>

<button>a</button>

这是小提琴：https://jsfiddle.net/vecLotgu/1/

但是，使用这种方法，计算多边形的点（随着它们的变化）在算法上会很复杂。我想问，有没有办法在纯CSS中做到这一点？此外，您有什么好主意，如何解决svg解决方案是点计算？

谢谢

HTML CSS CSS进度条

0 个答案: