使用 SVG 制作扇形

有时候我们需要制作扇形，比如图形化数据生成饼图的时候。使用 HTML + CSS 做不到，必须借助 SVG 帮助。经过一些摸索，大概方式如下：

0. 创建 SVG

我们需要一个 SVG，然后在里面画一个园：

<svg xmlns="http://www.w3.org/2000/svg" height="600" width="600" viewBox="0 0 20 20">
  <circle r="5" cx="10" cy="10" />
</svg>

这里，我创建了一个 SVG，并且以 10,10 位圆心，画了一个半径为 5 的圆。SVG 的视窗只需要显示这个圆，所以是 0 0 20 20 的正方形。width 和 height 用来定义网页中 SVG 的尺寸，SVG 是矢量图形，可以实现内容的无损缩放，所以即使显示尺寸比图形尺寸大很多，也不用担心出现锯齿。

1. 用边框画圆形

接下来，我们用给圆加边框的方式来做圆形。

<circle
  r="5"
  cx="10"
  cy="10"
  fill="transparent"
  stroke="tomato"
  stroke-linecap="butt"
  stroke-width="10"
></circle>

首先，我们用 fill="transparent" 清理掉圆形内部的颜色，然后用 stroke="tomato" 给边框加上橙色。接下来，我们通过 stroke-width="10" 设置边框宽度为 10，这也是矩形半径。

此时，屏幕上会出现一个橙色的正圆。

2. 画扇形

画扇形的方式有很多，比如画两条半径然后画弧形再填充颜色。但是利用边框画扇形最简单。

用边框画扇形说白了，其实是结合圆环和虚线，需要有扇形的地方，就填充颜色；不需要扇形的地方，就用虚线的空白。这里要用到 stroke-dasharray 属性，它的规则很简单，奇数为实偶数为虚，所以我们只要计算扇形所需的弧形长度，然后剩下的填充周长即可。

在我们这里，就是 stroke-dasharray=”calc(10 * 3.1415926 * 1/6) 31.415926"，即取绘制一个 1/6 大小的扇形。

3. 修改位置

修改位置需要使用 stroke-dashoffset 属性，它会把图形从原来的位置移动若干距离，正的就往起点移动，负的就往终点移动。

在我们这里，就是 stroke-dashoffset="calc(-10 * 3.1415926 * 1/6)"，将第二个扇形移到第一个扇形的旁边。

4. 其它+已知问题+扩展阅读

最终效果：https://codepen.io/meathill/pen/yLMQqBQ?editors=1000

这些属性，也可以使用 CSS 样式替换，效果一样。

Safari 问题比较多，首先半圆就不是半圆，其次偏移也不对，不知道是否只支持 CSS。

• MDN
• CSS-tricks