svg：制作播放暂停按钮和进度条

马黑黑 · 发表于 2022-9-3 09:50

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

svg由于其矢量特性，它绘制的图形在质量方面有保障，此外，svg的优势主要还有二：一是，它可以以多种方式嵌入到HTML中，甚至可以直接在DOM中使用；二是，操作svg就与操作其他HTML元素一样，既可以以HTML的方式定义svg及其内部元素的属性，也可以通过CSS定义大量的属性，还能通过JS对之进行相关操控。svg也有缺点，主要是内部元素属性繁多，不易把握。

本帖以绘制播放器按钮和进度条为学习目标，通过绘制几个图形，再次展现svg的魅力，达成学习几个svg的相关知识。

我们首先复习一下 svg 的使用。它和任何一个 HTML 元素一样，可以作为 DOM 的文档流代码，写在需要的地方：


<svg width="300" height="100">

</svg>


就酱，非常简单：svg 有起始符，有收尾符，内部元素的代码就写在二者间；svg 可以定义宽度和高度，它还有其他属性，这里先不介绍。剩下的工作就是在  写入其他 svg 内部元素了。

网易云音乐的播放器是把三角形符号即播放按钮放在圆环里，我们也想这么办。下面就先在 svg 里画一个圆，所用到的命令是 circle，circle 就是圆的意思，它绘制圆的语句如下：

<circle cx="20" cy="50" r="15" />

cx 中的 c 就是 circle，x 是X坐标，cx 指圆心X坐标；同理，cy 指圆心Y坐标。r 就是 radius，半径。cy、cy、r 这三个属性是画圆固定的属性，必须如此，也必须指定。

不过我们这样画出的圆是黑乎乎的，因为默认的着色是黑色，我们得指定颜色。着色方法，有 fill 和 stroke 两种，这和 canvas 画布一样，fill 是填充，stroke 是描边。fill 针对任何闭合性的图形；stroke 针对可以描边的对象（例如线段、类边框的东东），需要指定 stroke-width 值（否则使用默认值）。上面的语句，我们想让它画个圆环，环的厚度是3个像素单位，不要填充色，这么做：

<circle cx="20" cy="50" r="15" fill="none" stroke="olive" stroke-width="3" />

fill 要指定为 none 或 transparent，stroke 我们用了橄榄色，圆环厚度设置为3个像素。画出来后你会发现很漂亮，不会出现我们用 border-radius: 50%; 去设定HTML元素为圆形时可能出现的毛边锯齿。

下来绘制播放按钮，一个小三角形。我们想把它画到圆环里面去，所以将要使用到的一些数值要结合上面的圆的各个参数值。三角形是边最少的多边形，svg 绘制多边形的命令是 polygon，poly词根意为多，gon后缀则表示 angle（角度），多边形其实本质就是多个角的图形，polygon 绘制多边形所需的参数就是各个角的xy坐标，画三角形的语句如下：

<polygon points="15 40, 15 60, 30 50" fill="olive" />

核心在代码的红色部分，它需要 points 参数，point 是点的意思，注意这里用复数 points。我们给出了三个点的xy坐标，这些坐标点的设计依据圆的位置与尺寸而定，虽然还不很严谨。fill="olive" 则是指定填充色，前面对此已经提及，stroke不设定，不需要。

接下来是暂停按钮了。暂停按钮暂时就画在圆环的右边，不去挤那个可爱的三角形了，将来有机会再去整合位置。暂停按钮是两道短粗竖线，我们用两个矩形来模拟。矩形，rect，就它了，语法如下：

<rect x="数值" y="数值" width="数值" height="数值" />

x 指矩形左上角的X坐标，y 是Y坐标。width 和 height 分别值矩形的宽、高。按这个语法，我们来绘制第一根短线：

<rect x="50" y="40" width="3" height="20" fill="olive" />

前面的圆，圆形X坐标是 20，加上半径 15，它们加起来占据的位置不足 50，所以暂定将暂停按钮第一根竖线画在X坐标的 50 像素处，Y坐标设定为 40 的依据是圆环的Y坐标为 50，而我们的短线高度是20，为了在垂直放方向居中于圆环，设为 40。第二根短线往右边挪一点点，其余参数不变：

<rect x="55" y="40" width="3" height="20" fill="olive" />

最后画一条线就完事了。画线用的指令是 line，line 就是线的意思，它需要四个位置参数和 stroke 相关参数，如颜色、尺寸，line 不用 fill 着色。语法：

<line x1="值" y1="值" x2="值" y2="值" stroke="颜色" stroke-width="值" />

我们在暂停按钮的右边画一根线看看，线粗用默认值，也就是不设置 stroke-width：

<line x1="70" y1="50" x2="270" y2="50" stroke="olive" />

这是一根水平线，y1 和 y2 都是 50，与圆环Y坐标一致，x1 为70，x2 为270，这根线的长度就是 200 了。

就酱，完工。下面给出完整代码：