javascript - 循环计时器sgv html js css，当变大时，线条与大小不匹配

Question

我有一个使用 svg 使用 js、css 和 html 完成的循环计时器。当我将计时器变大时，线条与计时器不匹配，因此循环计时器中始终存在间隙。如何使绘制的线变大以完成一个完整的圆圈？

HTML

        <div id="timer" style="height: 44px">
    <div class="item html">
        <h2 style="left: 0px; top: 28px">1200</h2>
        <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
         <g>
          <title>Layer 1</title>
          <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#be1e2d" fill="none"/>
         </g>
        </svg>
    </div>
    </div>

Javascript

    var mins = 20;
    var seconds = mins * 60; /* how long the timer runs for */
    var initialOffset = '440';
    var i = -1200;
    var interval = setInterval(


    function() {
        $('.circle_animation').css('stroke-dashoffset', initialOffset-(i*(initialOffset/seconds)));
        $('h2').text(Math.abs(i));
        if (i == 0) {
            clearInterval(interval);
        }
        i++;  
    }, 1000);

CSS

.item h2 {
    text-align: center;
    position: absolute;
    line-height: 125px;
    width: 100%;
    color: #FFFFFF;
    left: 31px;
    top: 24px;
    height: 98px;
}

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
  transition: all 1s linear;
}

Answer 1

保留圆半径，将 viewBox 属性添加到 <svg> element viewBox="0 0 160 160"那么您可以根据需要更改 svg 高度/宽度，圆将自动缩放而根本不改变半径。