小编use*_*848的帖子

即时通讯使用此处找到的代码创建一个进度圈:http://codepen.io/JMChristensen/pen/Ablch

但是我不希望它变得那么大,所以我将内圈和外圈的圆半径改为40而不是90.问题是在我这样做后,显示百分比的圆圈停止工作,无论我输入的百分比是多少圈子没有变化,总是看起来是100%.

这是html:

<h1>SVG Circle Progress</h1>
<h2>Based off of CSS3 circle progress bars</h2>

    <div id="cont" data-pct="100">
    <svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle r="40" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
      <circle id="bar" r="40" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    </svg>
    </div>
    <label for="percent">Type a percent!</label>
    <input id="percent" name="percent">

我认为它与在js中计算的stroke-dashoffset有关,但我无法弄清楚它背后的数学.