數據百分比卡住

Question

由於某種原因，數據百分比不會對任何值作出反應。它陷入了87％。

PHP

<ul class="progress"> 
      <!-- Item --> 
      <li data-name="HTML & CSS" data-percent="87%"> <svg viewBox="-10 -10 220 220"> 
      <g fill="none" stroke-width="2" transform="translate(100,100)"> 
       <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/> 
       <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/> 
       <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/> 
       <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/> 
       <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/> 
       <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/> 
      </g> 
      </svg> <svg viewBox="-10 -10 220 220"> 
      <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="547"></path> 
      </svg> </li> 
     </ul> 

     <!-- Defining Angle Gradient Colors --> 
     <svg width="0" height="0"> 
     <defs> 
     <linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1"> 
     <stop stop-color="#618099"/> 
     <stop offset="100%" stop-color="#8e6677"/> 
     </linearGradient> 
     <linearGradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1"> 
     <stop stop-color="#8e6677"/> 
     <stop offset="100%" stop-color="#9b5e67"/> 
     </linearGradient> 
     <linearGradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1"> 
     <stop stop-color="#9b5e67"/> 
     <stop offset="100%" stop-color="#9c787a"/> 
     </linearGradient> 
     <linearGradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0"> 
     <stop stop-color="#9c787a"/> 
     <stop offset="100%" stop-color="#817a94"/> 
     </linearGradient> 
     <linearGradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0"> 
     <stop stop-color="#817a94"/> 
     <stop offset="100%" stop-color="#498a98"/> 
     </linearGradient> 
     <linearGradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0"> 
     <stop stop-color="#498a98"/> 
     <stop offset="100%" stop-color="#618099"/> 
     </linearGradient> 
     </defs> 
     </svg> 

CSS

/* Progress *//* Load animation */ 

@-webkit-keyframes 
load { 0% { 
stroke-dashoffset:0 
} 
} 
@-moz-keyframes 
load { 0% { 
stroke-dashoffset:0 
} 
} 
@keyframes 
load { 0% { 
stroke-dashoffset:0 
} 
} 

.progress { 
    position: relative; 
    display: inline-block; 
    padding: 0; 
    text-align: center; 
    overflow: visible; 
    box-shadow: none; 
    background-image: none; 
    background-color: transparent; 
} 

svg:not(:root) { 
    overflow: visible 
} 

/* Item */ 

.progress>li { 
    display: inline-block; 
    position: relative; 
    text-align: center; 
    color: #93A2AC; 
    font-family: Lato; 
    font-weight: 100; 
    margin: 2rem; 
} 

.progress>li:before { 
    content: attr(data-name); 
    position: absolute; 
    width: 100%; 
    bottom: -2rem; 
    font-weight: 400; 
} 

.progress>li:after { 
    content: attr(data-percent); 
    position: absolute; 
    width: 100%; 
    top: 3.7rem; 
    left: 0; 
    font-size: 2rem; 
    text-align: center; 
} 

.progress svg { 
    width: 10rem; 
    height: 10rem; 
} 

.progress svg:nth-child(2) { 
    position: absolute; 
    left: 0; 
    top: 0; 
    transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
} 

.progress svg:nth-child(2) path { 
    fill: none; 
    stroke-width: 10; 
    stroke-dasharray: 600; 
    stroke: rgba(249, 249, 249, 1); 
    -webkit-animation: load 5s; 
    -moz-animation: load 5s; 
    -o-animation: load 5s; 
    animation: load 5s; 
} 

我試圖改變的價值幾倍，還試圖刪除一些代碼。但似乎沒有任何幫助。

你能幫我一下嗎？

Jsfiddle

Answer 1

你的圈子路徑的長度爲628.407。

所以你的dasharray和你的dashoffset必須匹配。您使用的是600的dasharray和547的dashoffset。

如果將兩者都更改爲629.進度表將完成。

<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path> 

.progress svg:nth-child(2) path { 
    ... 
    stroke-dasharray: 629; 
    ... 
} 

http://jsfiddle.net/vqpejxLk/1/

如果你想有一個百分比，由629乘以所以50％是314.5，等