数据百分比陷入困境

For some reason the data-percent does not react to any value. It gets stuck at 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;
}

I have tried changing the value several times, also tried to delete some of the code. But nothing seems to help.

Could you please help me out?

Jsfiddle

查看全部
douba9776
douba9776
2015/07/03 17:23
  • css
  • svg
  • php
  • 点赞
  • 收藏
  • 回答
    私信
满意答案
查看全部

1个回复