我使用此处找到的代码创建进度圈：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中计算的笔划-dashoffset有关，但我无法真正弄清楚它背后的数学。
该进度表中的动画是使用 SVG 破折号数组技巧完成的，参见这篇文章位于 css-tricks.com.
它的工作原理是为进度表中使用的圆圈定义虚线图案，其中虚线的长度等于 SVG 中描边线的路径长度。
由于您将半径从 90 更改为 40，因此需要缩放dash-array参数从 2*pi*90 (565.48) 到 2*pi*40 (251.33)。
这是更新的代码笔
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
