Question

我使用此处的代码创建一个进度圈：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有关，但我无法弄清楚它背后的数学。

Answer 1

此进度表中的动画使用this article at css-tricks.com中描述的SVG短划线数组技巧完成。

它的工作原理是为进度表中使用的圆定义一个虚线图案，其中短划线的长度等于SVG中描边线的路径长度。

由于您将半径从90更改为40，因此需要将dash-array参数从2 * pi * 90（565.48）缩放到2 * pi * 40（251.33）。

Here's an updated codepen

Answer 2

当半径变化时，stroke-dasharray值需要改变。

请注意565.48 = 2 * PI * 90所以当您更改半径时，需要将stroke-dasharray属性更改为2 * PI * r，其中r是新半径。

Answer 3

您也可以使用百分比设置radius，dasharray和dashoffset。并且不需要对仪器值进行重新计算。

SVG进度圆与百分比

3 个答案: