带有角度渐变的 Svg 多边形

Question

I am trying to implement angular gradient with svg polygon. Any ideas about gradient? I need something like that.

Gradient parameters: Angular Gradient #F7891F #FFAD2B

What i have now:

The code for implementing this:

<Defs>
      <clipPath id='graph-clip'>
         <polygon
             id='graph-shape'
             points={pointsForOuterDiagram}
         />
      </clipPath>
 </Defs>

 <use
    xlinkHref='#graph-shape'
    fill='#fff'
     stroke='#FECC7F'
     strokeWidth='10'
     className={styles.outerDiagram}
 />

 <use
     xlinkHref='#graph-shape'
     fill='none'
     stroke='#FEA929'
     strokeWidth='10'
     clipPath='url(#graph-clip)'
     className={styles.innerDiagram}
 />

Answer 1

I think, I found the solution by imitating angular gradient with linear. Angular gradients are created when x1 and x2 differ and y1 and y2 differ.

Added:

                        <linearGradient
                            x1='50%'
                            y1='50%'
                            x2='100%'
                            y2='100%'
                            id='gradient'
                        >
                            <stop stopColor='#FDC87D' offset='0%' />
                            <stop stopColor='#FAB878' offset='100%' />
                        </linearGradient>

                        <linearGradient
                            x1='50%'
                            y1='50%'
                            x2='100%'
                            y2='100%'
                            id='inner'
                        >
                            <stop stopColor='#FEAC2A' offset='0%' />
                            <stop stopColor='#F7891F' offset='100%' />
                        </linearGradient>

So now it looks like that: