带有 angulart 渐变的 Svg 多边形

Question

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

渐变参数： Angular 渐变 #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}
 />

Answer 1

我想，我通过用线性模仿 angular 渐变找到了解决方案。 Angular 当 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>

所以现在看起来像这样：

带有 angulart 渐变的 Svg 多边形

Svg polygon with angulart gradient

javascript

svg

gradient

polygon

reactjs