svg的分割线问题

Question

如何实现在最大值(警戒线)下面的线条是红色 二在最大值上面的是另一种颜色？类似这种效果

我的代码：
<path

      d={lineGen(data)} 
      stroke={arr > base.baseValue ? line.color : 'red'} 
      fill="none" 
      strokeDasharray={line.lineType === 'dash' ? '3 3' : null}
      strokeWidth={line.lineWidth}/>

问题在于我的线段是一条完整的路径构成，按照我的代码全是红色的线段。求各位大佬提供一下意见

Answer 1

hh 解决了 用了二个clipPath