由于需要在網頁中展示一個如下的效果：

儀表盤

項目開發采用的是React，使用 Ant Design 組件庫，我發現Ant Design中有一個Progress很像。

Process使用的是rc_progress，實現過程很巧妙，首先通過兩個圓，然后將要顯示進度的圓變成虛線，通過調節虛線起始位置來實現進度的變化。我也類似的做了一個儀表盤，對Process做了一些調整。

具體步驟如下：

首先畫兩個圓，一個為底圖，一個為進度圖。畫法是分別左右畫一個半圓。

const pathString = `M 50,50 m 0,${radius}
  a ${radius},${radius} 0 1 1 0,-${2 * radius}
  a ${radius},${radius} 0 1 1 0,${2 * radius}`;

然后將底圖的圓變成虛線，虛線中不顯示的部分我開口的部分

const len = Math.PI * 2 * radius;
const trailPathStyle = {
  strokeDasharray: `${len - openWidth}px ${len}px`,
  strokeDashoffset: `${openWidth / 2}px`,
  transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease',
};

同樣的方法，將進度圓也修改為虛線

const strokePathStyle = {
  strokeDasharray: `${percent / 100 * (len - openWidth)}px ${len}px`,
  strokeDashoffset: `${openWidth / 2}px`,
  transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease',
};

SVG部分代碼如下：

      <svg
        className={`${prefixCls}-circle ${className}`}
        viewBox="0 0 100 100"
        style={style}
        {...restProps}
      >
        <path
          className={`${prefixCls}-circle-trail`}
          d={pathString}
          stroke={trailColor}
          strokeWidth={trailWidth || strokeWidth}
          fillOpacity="0"
        />
        <path
          className={`${prefixCls}-circle-path`}
          d={pathString}
          strokeLinecap={strokeLinecap}
          stroke={strokeColor}
          strokeWidth={strokeWidth}
          fillOpacity="0"
          ref={(path) => { this.path = path; }}
          style={pathStyle}
        />
      </svg>

這部分代碼我已經提交了一個建議給Ant Design，希望他們能做的更好。

后記，相關的SVG知識

<path> 標簽：用來定義路徑。

下面的命令可用于路徑數據：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

注釋：以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。

stroke-dasharray 是用于設置虛線的屬性。你可以使用它來設置每條劃線長度以及劃線之間空格的大小著作權歸作者所有。

<svg width="600px" height="300px">
    <line x1="0" y1="20" x2="600" y2="20" stroke="#000" stroke-width="3" stroke-dasharray="10 2"/>
    <line x1="0" y1="40" x2="600" y2="40" stroke="#000" stroke-width="3" stroke-dasharray="5 10"/>
    <line x1="0" y1="60" x2="600" y2="60" stroke="#000" stroke-width="3" stroke-dasharray="1 1"/>
    <line x1="0" y1="80" x2="600" y2="80" stroke="#000" stroke-width="3" stroke-dasharray="10"/>
</svg>

第一個值是劃線的長度，第二個值是各個劃線之間的空格大小。如果你只設置了一個值（如上面的最后一個示例），它會默認設置相同劃線長度和劃線空格。

stroke-dashoffset屬性是設置虛線的偏移量。

<svg width="600px">
    <line x1="0" y1="20" x2="600" y2="20" stroke="#000" stroke-width="3"
          stroke-dasharray="50 30"/>
    <line x1="0" y1="40" x2="600" y2="40" stroke="#000" stroke-width="3"
          stroke-dasharray="50 30"
          stroke-dashoffset="10"/>
</svg>

第二條線設置stroke-dashoffset=10，線條偏移了10。