使用 SVG 实现圆(环)形 进度条

• 前几期我们尝试了多种方式实现任意角度扇形
• 今天我们使用 SVG 实现环形进度条

熟悉 SVG

首先我们需要对 svg 有几个基本的了解, 如果感兴趣可以参考这个文档继续学习developer.mozilla.org/zh-CN/docs/… 。下面的内容做一下简单的介绍

• SVG 是一种 XML 语言，类似 XHTML，可以用来绘制矢量图形
• SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，
• 或者将这两种方式结合起来创建图形。
• 图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。

基本要素:

• HTML 提供了定义标题、段落、表格等等内容的元素。
• 与此类似，SVG 也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线。
• 一个简单的 SVG 文档由 <svg> 根元素和基本的形状元素构成。
• 另外还有一个g元素，它用来把若干个基本形状编成一个组。
• SVG 可以变得更加复杂。SVG 支持渐变、旋转、动画、滤镜效果、与 JavaScript 交互等等功能，
• 但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。

实现进度条

一. 创建容器

<svg width="200" height="200"></svg>

• 根据语法, 我们先创建一个 200 * 200 的容器
• 之后的图形都要在这个容器内

二. 画一个圆形

<svg width="200" height="200">
    <circle cx="100" cy="100" r="80"/>
</svg>

• 使用 circle 标签可以很方便的画一个圆形, 通过 cx 和 cy 可以确定圆心位置, r 表示圆的半径

三. 添加外轮廓

<svg width="200" height="200">
    <circle
        cx="100"
        cy="100"
        r="80"
        stroke-width="10"
        stroke="red"
        stroke-opacity="0.5"
    />
</svg>

• 我们画了一个轮廓, 可以看出来这个轮廓一半在里面一半在外面(圆外)
• 我们设置的 stroke-width="10", 所以这个图形的实际半径为 (80 + 10/2) = 85, 这就是刚开始我们不设置半径为 100 的原因
• 外轮廓是一个环形, 很符合我们的进度条形状; 但他是完整的, 怎样实现部分显示呢, 我们继续往下看

四. 设置轮廓的样式

<svg width="200" height="200">
    <circle
        cx="100"
        cy="100"
        r="80"
        stroke-width="10"
        stroke="red"
        stroke-opacity="0.5"
        stroke-dasharray="20 80"
    />
</svg>

• stroke-dasharray 可以设置轮廓的样式, 我在图上已经标识了, 应该不难理解
• 如果我们只想要第一段显示, 以后的都是空白, 那我们只要保证第二个值大于圆的周长就可以了, 即: 2πr (本例中约等于 502.6)
• 再来看第一个值, 假设我们想要的角度为 deg, 那第一个值 = (deg / 360) * (2 * π * r)

五. 实现基本要求

<svg width="200" height="200">
    <circle
        cx="100"
        cy="100"
        r="80"
        fill-opacity="0"
        stroke-width="10"
        stroke="red"
        stroke-opacity="0.5"
        stroke-dasharray="139.6 502.6"
        stroke-linecap="round"
        transform="rotate(-90 100 100)"
    />
</svg>

• 我们通过上面的公式计算 100 度时, stroke-dasharray="139.6 502.6"
• 因为默认是从 90 度的位置开始的, 我们希望从 0 度开始, 所以我们让图形旋转 -90 度 transform="rotate(-90 100 100)"
• 设置 fill-opacity="0" 让内部的圆透明(不显示)
• 通过设置 stroke-linecap="round", 使圆环的两端变成圆弧

五. 增加文字显示

<svg width="200" height="200">
    <circle
        cx="100"
        cy="100"
        r="80"
        fill-opacity="0"
        stroke-width="10"
        stroke="red"
        stroke-opacity="0.5"
        stroke-dasharray="400 502.6"
        stroke-linecap="round"
        transform="rotate(-90 100 100)"
    />
    <text x="100"  y="100" dy="5" text-anchor="middle">100 度</text>
</svg>

• 通过 text 标签给图形加入文字

六. 增加未选中样式

<svg width="200" height="200">
    <circle
        cx="100"
        cy="100"
        r="80"
        fill-opacity="0"
        stroke-width="10"
        stroke="#eee"
    />
    <circle
        cx="100"
        cy="100"
        r="80"
        fill-opacity="0"
        stroke-width="10"
        stroke="red"
        stroke-opacity="0.5"
        stroke-dasharray="432.8 502.6"
        stroke-linecap="round"
        transform="rotate(-90 100 100)"
    />
    <text x="100"  y="100" dy="5" text-anchor="middle">310 度</text>
</svg>

小结

• 这个就是使用 svg 实现一个环形进度条的过程
• 实现的变化可以通过 js 去实现
• 有一部分是可以通过样式去实现的, 如旋转 transform: rotate(-90deg);

相关文档