角圆形 svg 进度条渐变笔画

Posted 2023-03-06

【中文标题】角圆形 svg 进度条渐变笔画

【英文标题】：Angular circular svg progress bar gradient stroke

【发布时间】：2015-03-16 03:07:36

【问题描述】：

我正在尝试构建一个角度指令，它将显示某物的循环进度。

这里是fiddle

我想在笔划中有重复的线性渐变渐变浅黑线

小提琴中的一些代码

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

【问题讨论】：

好的，请问有什么问题？

@unobf 如何实现图像中显示的内容

【参考方案1】：

我对使用这样的 SVG 不是非常熟悉，但也许这个想法会有所帮助。

你能：

不使用笔划来显示进度。 做一个馅饼三明治。使用背景圆和前景圆，前景圆的直径是背景圆的宽度减去当前笔划的 2 倍。 将馅饼片用作三明治中的“肉”，并在进度达到 100% 时缩小馅饼的范围。

这将允许您让背景圆圈具有条纹背景并使其具有动画效果。这对于 CSS 来说绝对是可能的。 Chris Coyier 在这里展示了如何：http://css-tricks.com/uniqlo-stripe-hovers/

【参考方案2】：

这是一个使用 d3 的小提琴示例

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

您只需要使用percentage 变量即可让它向您显示适当的数量。您也可以调整它以使用标准 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) + ")");

通过向 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>

还有一个样式，就可以得到渐变描边

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

我将把它作为练习留给你，让你弄清楚什么渐变适合你

【讨论】：

条纹线不存在