svg试玩

使用svg完成顶部的切换tab样式

为了让文本标签代码更清晰划分，此处我单独将需要定义放到一块儿，svg的定义用，这里按设计图，主要用到了filter滤镜（阴影）以及linearGradient线性渐变（渐变色），记得每个定义都要加上它自己的id，供后面绘制不同的图形识别使用。此处svg的width，height我都设置了0%。

接下来就是使用了，二话不说直接用上！这里主要涉及如何绘制path，以及填充图形的知识点。 元素用于定义任何路径。下面是绘制用到的相关命令字符

序号	命令和描述
1	M − moveto − 从一个点移动到另一个点。
2	L − lineto − 创建一条线。
3	H − 水平线 − 创建一条水平线。
4	V − 垂直线 − 创建一条垂直线。
5	C − curveto − 创建一条曲线。
6	S − 平滑曲线 − 创建平滑曲线。
7	Q − 二次贝塞尔曲线 − 创建二次贝塞尔曲线。
8	T − 平滑二次贝塞尔曲线 − 创建平滑二次贝塞尔曲线
9	A − 椭圆弧 − 创建椭圆弧。
10	Z − closepath − 关闭路径。

svg图形是可以自适应缩放的，我这里按设计稿尺寸绘制完成路径，使用viewbox设置宽高 viewBox="0 0 456 90" （按设计稿上的尺寸），然后再设置width=100%，height=100%，即可安全实现svg图形的自适应了。

svg图形里的文字也可以直接通过svg绘制上，主要留意顺序，文字的绘制是在绘制完成图形之后的，因此文字要放置path标签之后。然而我这里没有将文字一起用svg绘制，是用了postion定位上去的。

大致完成简单的交互逻辑，这个功能设计便完成啦~