使用SVG制作进度条

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

进度条是我们在Web中经常看到的一种效果,常见的进度条有水平横条和径向圆形的进度条。今天我们来看看怎么使用SVG来实现进度条的效果。使用SVG可以很容易的实现,也易于理解,最主要是使用SVG实现的进度条具有良好的跨浏览器,并且能根据浏览器屏幕尺寸很好的显示。

基础

在具体制作之前,有一些简单的概念要了解一下,这是制作进度条的一些基础。

  • 水平进度条,是一条直线,使用SVG的<line>元素可以绘制
  • 圆形进度条,是一个环形,使用SVG的<circle>元素可以绘制
  • 通过fill:none设置线条无填充色,使用stroke-width来设置进度条的粗细

使用stroke-width设置进度条粗细,水平进度条相对而言较主简单,直接设置就能指定进度条的高度,对于其长度通过(x1,y1)(x2,y2)来确定。对于圆形进度条,同样需要使用fill:none让圆形不填充任何颜色,stroke-width设置圆形的粗细,只是其值是圆周长的十分之一。

通过stroke-width和圆的周长,我们可以计算出圆形的半径。比如我们圆形的外周长是120,同时stroke-width的值是12。这样我们就可以计算出圆形半径:

(120 / 2) - (12 / 2) = 54

SVG代码很简单:

<svg width="200" height="200" viewBox="0 0 200 200">
    <line x1="10" y1="10" x2="110" y2="10" fill="none" stroke-width="12" stroke="#666" />
    <circle cx="60" cy="80" r="54" fill="none" stroke="#666" stroke-width="12" />
</svg>

这个时候你看到的效果如下:

制作进度条

事实上,我们所看到的进度条都是有另一个颜色来表示进度的,而上面我们看到的只是进度条的背景色。也就是说,我们需要再绘制一个<line><circle>元素,其坐标参数,进度条粗细等参数都一样,唯一不同的是,线条的颜色要不一样。

通过《

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/svg/create-progress-bar-with-svg.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部