如何解决带有角度渐变的 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>
现在看起来是这样的:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。