[JavaScript知识库]elementui自定义进度条形状

前言

进度条多以圆形、直线以及仪表盘形来展示，难免会有ui出奇怪的样式，想要不一样的形状。组件自带没有自定义形状。

一、我们看下进度条的结构

如图，改变进度条形状重点就是在svg里的数据，第一个path是进度条的背景，第二个path是走进度的进度条。我们想要改进度条形状就是把path里的d改掉

二、怎么改path里数据

1.了解下svg

具体标签有

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
以上的标签都是画各种图的，要改进度条的形状就是改path能力强的就直接研究path吧
路径 <path>

2.其他svg标签转换成path

直接上能转换的链接
https://www.zhangxinxu.com/sp/path.html

个人觉得研究其他标签要比研究path简单点，网上也能找到很多形状 （下面是网上找到的五角星）

3.最关键的一步

// progress 是我自己定义的class,根据实际来
.progress svg path {
  d: path(
    /* "M50 15 h26.5a5 5 0 0 1 5 5v73a5 5 0 0 1 -5 5h-53.9a5 5 0 0 1 -5 -5 v-73 a5 5 0 0 1 5 -5 z" */
      /* "M100 10L40 198 190 78 10 78 160 198z" */
   "M50 48L 33 97 76 68 24 68 63 98z"
  ) !important;
}
.progress svg path:first-child {
  stroke: rgb(255, 237, 211);
}

转换完是M100 10L40 198 190 78 10 78 160 198z，但是组件自带样式，还得适配组件的（根据组件的样式来，d不是固定的），网页上看着改变数据。

最终效果，起点是正上放，想换起点可以稍微研究下path。这里组件:width=“390”。