由于需要在網(wǎng)頁(yè)中展示一個(gè)如下的效果：

儀表盤(pán)

項(xiàng)目開(kāi)發(fā)采用的是React，使用 Ant Design 組件庫(kù)，我發(fā)現(xiàn)Ant Design中有一個(gè)Progress很像。

Process使用的是rc_progress，實(shí)現(xiàn)過(guò)程很巧妙，首先通過(guò)兩個(gè)圓，然后將要顯示進(jìn)度的圓變成虛線，通過(guò)調(diào)節(jié)虛線起始位置來(lái)實(shí)現(xiàn)進(jìn)度的變化。我也類似的做了一個(gè)儀表盤(pán)，對(duì)Process做了一些調(diào)整。

具體步驟如下：

首先畫(huà)兩個(gè)圓，一個(gè)為底圖，一個(gè)為進(jìn)度圖。畫(huà)法是分別左右畫(huà)一個(gè)半圓。

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}`;

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

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',
};

同樣的方法，將進(jìn)度圓也修改為虛線

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>

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

后記，相關(guān)的SVG知識(shí)

<path> 標(biāo)簽：用來(lái)定義路徑。

下面的命令可用于路徑數(shù)據(jù)：

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

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

stroke-dasharray 是用于設(shè)置虛線的屬性。你可以使用它來(lái)設(shè)置每條劃線長(zhǎng)度以及劃線之間空格的大小著作權(quán)歸作者所有。

<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>

第一個(gè)值是劃線的長(zhǎng)度，第二個(gè)值是各個(gè)劃線之間的空格大小。如果你只設(shè)置了一個(gè)值（如上面的最后一個(gè)示例），它會(huì)默認(rèn)設(shè)置相同劃線長(zhǎng)度和劃線空格。

stroke-dashoffset屬性是設(shè)置虛線的偏移量。

<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>

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