带有角度渐变的 Svg 多边形

问题描述

我正在尝试使用 svg 多边形实现角度渐变。关于渐变的任何想法？我需要这样的东西。

梯度参数： 角度渐变 #F7891F #FFAD2B

我现在拥有的：

实现这个的代码：

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

解决方法

我想，我通过用线性模拟角度梯度找到了解决方案。 当 x1 和 x2 不同且 y1 和 y2 不同时，会创建角度梯度。

添加：

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

现在看起来是这样的：