带有角渐变的 Svg 多边形答案

【问题标题】：Svg polygon with angulart gradient带有角渐变的 Svg 多边形
【发布时间】：2021-07-19 13:37:07
【问题描述】：

我正在尝试使用 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}
 />

【问题讨论】：

你所拥有的东西看起来很不错，至少快速浏览一下——它似乎和你想要完成的事情一样？
是的，几乎一样，但是第一个有不同的颜色导致角度渐变。

标签： javascript reactjs svg polygon gradient

【解决方案1】：

我想，我通过用线性模拟角度梯度找到了解决方案。当 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>

所以现在看起来是这样的：

【讨论】：