使用SVG制作进度条

最新推荐文章于 2024-06-26 09:47:01 发布

W3cplus_

最新推荐文章于 2024-06-26 09:47:01 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.csdn.net/tja8N2m2G46OMtF/article/details/79227333

版权

本文介绍了如何使用SVG创建水平和圆形进度条，讲解了SVG的基础概念和制作原理，包括设置线条颜色、调整位置以及利用stroke-dasharray和stroke-dashoffset实现动态进度效果。最后提到了如何将这些进度条封装成Vue组件。

摘要由CSDN通过智能技术生成

进度条是我们在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>