각도 순환 형 진행 막대 그래디언트 획

Question

무언가의 순환 진행을 나타내는 각도 지시문을 작성하려고합니다. 여기

내가 바이올린에서

<div ng-app="myapp"> 
    <div ng-controller="myctrl"> 
     <circular-progress-bar background="#25714A" size="84" stroke-width="5" 
          complete="60" total="100"></circular-progress-bar> 
    </div> 
</div> 

Answer 1

나 '를

일부 코드와 같은 스트로크 뭔가 반복 선형 그라데이션 그라데이션 조명 어두운 라인을 가지고 할 fiddle

입니다 이런 SVG 작업에 엄청나게 익숙하지 않지만, 아마도이 아이디어가 도움이 될 수 있습니다.

당신은 할 수 :

• 진행 상황을 보여 스트로크를 사용하지 않습니다.
• 파이 조각 샌드위치를 ​​만드십시오. 배경 원과 전경 원을 사용하십시오. 전경 원의 직경은 배경 원의 너비에서 현재 획의 2 배를 뺀 값입니다.
• 파이 슬라이스를 샌드위치의 "고기"로 사용하고 진행률이 100 %가되면 범위를 줄입니다.

배경 서클에 줄무늬 배경이 있고 애니메이션으로 표시되도록 허용합니다. 이것은 CSS에서 가능합니다. 여기

Answer 2

http://css-tricks.com/uniqlo-stripe-hovers/는 D3 당신은 그냥 당신에게 적절한 양을 보여 얻기 위해 percentage 변수로 재생해야

http://jsfiddle.net/5yhgyyq9/4/

와 바이올린 예입니다 : 크리스 Coyier 어떻게 여기 보여줍니다. 표준 SVG에서도 작동하도록이 기능을 적용 할 수 있습니다. SVG

<svg> 
    <linearGradient id="mygradient" x1="0" y1="1" x2="6.123233995736766e-17" y2="0" gradientTransform="matrix(1,0,0,1,0,0)"> 
     <stop offset="0%" stop-color="#006d00"></stop> 
     <stop offset="10%" stop-color="#00ff00"></stop> 
     <stop offset="20%" stop-color="#006d00"></stop> 
     <stop offset="30%" stop-color="#00ff00"></stop> 
     <stop offset="40%" stop-color="#006d00"></stop> 
     <stop offset="50%" stop-color="#00ff00"></stop> 
     <stop offset="60%" stop-color="#006d00"></stop> 
     <stop offset="70%" stop-color="#00ff00"></stop> 
     <stop offset="80%" stop-color="#006d00"></stop> 
     <stop offset="90%" stop-color="#00ff00"></stop> 
     <stop offset="100%" stop-color="#006d00"></stop> 
    </linearGradient> 
</svg> 

과 스타일에 그라데이션 요소를 추가함으로써

var radius = 100, 
    padding = 10, 
    radians = 2 * Math.PI; 

var dimension = (2 * radius) + (2 * padding), 
    points = 50, percentage = .77; 

var angle = d3.scale.linear() 
    .domain([0, points-1]) 
    .range([0, radians]); 

var line = d3.svg.line.radial() 
    .interpolate("basis") 
    .tension(0) 
    .radius(radius) 
    .angle(function(d, i) { 
     if (i < (points*percentage + 1)) { 
      return angle(i); 
     } 
    }); 

var svg = d3.select("body").append("svg") 
    .attr("width", dimension) 
    .attr("height", dimension) 
.append("g"); 

svg.append("path").datum(d3.range(points)) 
    .attr("class", "line") 
    .attr("d", line) 
    .attr("transform", "translate(" + (radius + padding) + ", " + (radius + padding) + ")"); 

, 당신은 그라데이션 스트로크

.line { 
    fill: none; 
    stroke: url('#mygradient'); 
    stroke-width: 4px; 
    stroke-linecap:round; 
} 

내가 그림을 당신을 위해 운동으로 떠나을 얻을 수 있습니다 그라디언트가 정확히 작동하는지 확인