SVG进度圆与百分比 [英] SVG progress circle with percentage

问题描述

使用此处找到的代码创建进度圈： http://codepen.io/JMChristensen/ pen / Ablch

但我不想要那么大，所以我改变内圈和外圈的圆半径为40而不是90。问题是在我之后，显示百分比的圆圈停止工作，无论百分比，我的类型在圈子不改变，总是显示为100％。

这里html：

 < h1> SVG Circle Progress< / h1> 
< h2>根据CSS3圆圈进度条< / h2> 
 
< div id =contdata-pct =100> 
< svg id =svgwidth =200height =200viewPort =0 0 100 100version =1.1xmlns =http://www.w3.org/2000/ svg> 
< circle r =40cx =100cy =100fill =transparentstroke-dasharray =565.48stroke-dashoffset =0> 
< circle id =barr =40cx =100cy =100fill =transparentstroke-dasharray =565.48stroke-dashoffset =0> / circle> 
< / svg> 
< / div> 
< label for =percent>输入百分比！< / label> 
< input id =percentname =percent> 
  

我认为它与js中计算的stroke-dashoffset有关，

解决方案

在这个进度表中的动画是使用SVG dash-array技巧描述在本文位于css-tricks.com 。

它通过为进度表中使用的圆定义虚线模式，其中破折号的长度等于SVG中描边线的路径长度。

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

这是更新的程式码

im using the code found here to create a progress circle: http://codepen.io/JMChristensen/pen/Ablch

But i dont want it to be that big so i changed the circle radius for the inner and outer circle to be 40 instead of 90. Problem is after i do that the circle displaying the percentage stops working, no matter what percentage i type in the circle doesnt change and always appears to be at 100%.

here's the 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">

i think it has something to do with the stroke-dashoffset calculated in the js but i cant really figure out the math behind it.

解决方案

The animation in this progress meter is done using the SVG dash-array trick described in this article at css-tricks.com.

It works by defining a dashed line pattern for the circles used in the progress meter, where the length of the dash is equal to the path length of the stroked line in the SVG.

Since you changed the radius from 90 to 40, you need to scale the dash-array parameter from 2*pi*90 (565.48) to 2*pi*40 (251.33).

Here's an updated codepen

这篇关于SVG进度圆与百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！