SVG 圆弧弧形渐变实现

前言

开发需求，需要实现一个弧形渐变的弧形，如下图所示：

hx.png

首先是因为在安卓端开发此效果，是相对较简单的，安卓端提供了一个角度渐变方法，但是在h5中无此方法。
在canvas以及svg中，渐变只有两种：线性渐变，径向渐变，经过尝试都无法满足此功能。然后就考虑到使用分很多段去话弧，每段弧一个颜色来实现。
刚开始使用zrender，zrender是用于echarts的开发库，可能因为不熟悉，做出来锯齿非常大。感觉没法解决。就想到了svg以及d3.js。

实现代码

如下代码实现上图的效果，经过跟阿里的datav中的弧形柱图组件对比，相差不是太大。看了下datav的实现，思路是一致的。至于锯齿方便，总感觉要比datav上面的差一点点