svg：制作播放暂停按钮和进度条
svg由于其矢量特性，它绘制的图形在质量方面有保障，此外，svg的优势主要还有二：一是，它可以以多种方式嵌入到HTML中，甚至可以直接在DOM中使用；二是，操作svg就与操作其他HTML元素一样，既可以以HTML的方式定义svg及其内部元素的属性，也可以通过CSS定义大量的属性，还能通过JS对之进行相关操控。svg也有缺点，主要是内部元素属性繁多，不易把握。本帖以绘制播放器按钮和进度条为学习目标，通过绘制几个图形，再次展现svg的魅力，达成学习几个svg的相关知识。
我们首先复习一下 svg 的使用。它和任何一个 HTML 元素一样，可以作为 DOM 的文档流代码，写在需要的地方：
<!-- HTML其他代码 -->
<svg width="300" height="100">
<!-- svg 其他内部代码 -->
</svg>
<!-- HTML其他代码 -->
就酱，非常简单：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 了。
就酱，完工。下面给出完整代码：
<svg width="300" height="100" style="border: 1px solid;">
<circle cx="20" cy="50" r="15" fill="none" stroke="olive" stroke-width="3" />
<polygon points="15 40, 15 60, 30 50" fill="olive" />
<rect x="50" y="40" width="3" height="20" fill="olive" />
<rect x="55" y="40" width="3" height="20" fill="olive" />
<line x1="70" y1="50" x2="270" y2="50" stroke="olive" />
</svg>
一个播放器，把svg的常用绘制都用上了呢{:4_187:} 黑黑的讲解清清楚楚，很赞{:4_199:} 红影 发表于 2022-9-3 11:34
一个播放器，把svg的常用绘制都用上了呢
矢量按钮，可以用用 红影 发表于 2022-9-3 11:34
黑黑的讲解清清楚楚，很赞
讲的还可以吧 马黑黑 发表于 2022-9-3 13:01
矢量按钮，可以用用
嗯嗯，这个把播放器需要的全包了{:4_173:} 马黑黑 发表于 2022-9-3 13:01
讲的还可以吧
很赞，这个一步步看下来就懂了呢，谢谢黑黑{:4_187:} 红影 发表于 2022-9-3 16:14
很赞，这个一步步看下来就懂了呢，谢谢黑黑
懂还是容易的，关键是掌握 红影 发表于 2022-9-3 16:14
嗯嗯，这个把播放器需要的全包了
感觉还不错的吧 来学习老师的新代码，感谢老师的无私分享！{:4_190:} 梦缘 发表于 2022-9-3 19:25
来学习老师的新代码，感谢老师的无私分享！
{:4_190:} 马黑黑 发表于 2022-9-3 17:23
懂还是容易的，关键是掌握
除了记不住那些语句，查询用还是能用出来的{:4_173:} 马黑黑 发表于 2022-9-3 17:23
感觉还不错的吧
是的，基本功能都在了。 红影 发表于 2022-9-3 21:52
是的，基本功能都在了。
我刚才试着真正用svg做一个播放器，功能已经实现了，就是渐变这一块，svg和画布的一样，要下点功夫，代码也会有些繁琐。不带渐变的相对容易。 红影 发表于 2022-9-3 21:51
除了记不住那些语句，查询用还是能用出来的
每一个都查的话，会很麻烦。我一般是，没把握，或根本就不认得，就查一查。 马黑黑 发表于 2022-9-3 22:32
我刚才试着真正用svg做一个播放器，功能已经实现了，就是渐变这一块，svg和画布的一样，要下点功夫，代码 ...
黑黑太厉害了，其实也可以别渐变了，清清爽爽的也不错。 马黑黑 发表于 2022-9-3 22:33
每一个都查的话，会很麻烦。我一般是，没把握，或根本就不认得，就查一查。
你当然可以，我大多数都没把握的呀{:4_173:} 红影 发表于 2022-9-3 22:46
你当然可以，我大多数都没把握的呀
我也是一点一滴积累的，然后有些东东好久不用，也会想不起来或不够清晰 红影 发表于 2022-9-3 22:45
黑黑太厉害了，其实也可以别渐变了，清清爽爽的也不错。
渐变将来也要考虑，现在暂时酱紫吧 马黑黑 发表于 2022-9-3 22:54
我也是一点一滴积累的，然后有些东东好久不用，也会想不起来或不够清晰
黑黑学了这么多，非常不容易呢{:4_187:}