reactjs - React 改变 SVG 组件颜色
问题描述
我正在将一个 SVG 组件导入我的主页，但它改变了颜色。任何建议为什么？
我从 Figma 中导出了 SVG，然后将其转换为 react 组件。似乎结构很好，但会改变线性渐变颜色
这是它的外观 最佳结果
这是结果 结果
这是 SVG 组件代码：
import React from 'react'
function Bg() {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
width='315'
height='315'
fill='none'
viewBox='0 0 315 315'
>
<g filter='url(#filter0_d)'>
<rect
width='215'
height='215'
x='50'
y='30'
fill='url(#paint0_linear)'
rx='20'
></rect>
</g>
<mask
id='a'
width='215'
height='215'
x='50'
y='30'
maskUnits='userSpaceOnUse'
>
<rect width='215' height='215' x='50' y='30' fill='#fff' rx='20'></rect>
</mask>
<g mask='url(#a)'>
<path
fill='url(#paint1_linear)'
fillRule='evenodd'
d='M-260.867 73.26s141.688-69.107 366.272-46.072C329.988 50.225 376.783-94 376.783-94h67.891v205.654l-19.616 79.854s-174.342 90.387-297.706 74.404C3.987 249.929-116.682 229.21-280.674 313.855-444.666 398.499-260.867 73.26-260.867 73.26z'
clipRule='evenodd'
></path>
<mask
id='b'
width='794'
height='422'
x='-349'
y='-94'
maskUnits='userSpaceOnUse'
>
<path
fill='#fff'
fillRule='evenodd'
d='M-260.867 73.26s141.688-69.107 366.272-46.072C329.988 50.225 376.783-94 376.783-94h67.891v205.654l-19.616 79.854s-174.342 90.387-297.706 74.404C3.987 249.929-116.682 229.21-280.674 313.855-444.666 398.499-260.867 73.26-260.867 73.26z'
clipRule='evenodd'
></path>
</mask>
<g fillRule='evenodd' clipRule='evenodd' mask='url(#b)'>
<path
fill='url(#paint2_linear)'
d='M206.244 49.455s-88.496 20.87-66.688 62.769c21.807 41.898-96.135 67.071-96.135 67.071s-191.295 48.959 152.243 77.397C539.202 285.13 266.668 32 266.668 32l-60.424 17.455z'
></path>
<path
fill='url(#paint3_linear)'
d='M368.503 43.065s-88.497 20.87-66.689 62.769c21.808 41.899-96.135 67.072-96.135 67.072s-191.295 48.959 152.243 77.396C701.46 278.74 428.926 25.61 428.926 25.61l-60.423 17.455z'
></path>
<path
fill='url(#paint4_linear)'
d='M77.956 20.083s39.354 109.215 91.587 78.156c52.233-31.06 125.784 0 125.784 0s117.847 57.011-20.222-131.536c-138.07-188.547-197.15 53.38-197.15 53.38z'
></path>
<path
fill='#fff'
d='M-300.764 280.795s179.01-71.089 334.723 0C189.672 351.884 393.13 178.221 393.13 178.221S579.363 1.496 736.857 200.609C894.352 399.722 55.329 443.997 55.329 443.997l-390.215-67.972 34.122-95.23z'
opacity='0.45'
></path>
<path
fill='#fff'
d='M-278.479 225.622s181.385-64.804 334.52 11.671c153.135 76.474 362.535-89.989 362.535-89.989s192.293-170.125 342.736 34.358C911.755 386.145 71.696 401.14 71.696 401.14l-387.603-81.536 37.428-93.982z'
opacity='0.2'
></path>
</g>
<path
fill='url(#paint5_linear)'
fillRule='evenodd'
d='M97 228c11.046 0 20-4.477 20-10s-8.954-10-20-10-20 4.477-20 10 8.954 10 20 10z'
clipRule='evenodd'
></path>
<path
fill='url(#paint6_linear)'
fillRule='evenodd'
d='M99.137 149.056c5.942-3.428 8.257-10.538 5.169-15.881s-10.409-6.896-16.352-3.469c-5.942 3.428-8.257 10.538-5.169 15.882 3.088 5.343 10.409 6.896 16.352 3.468z'
clipRule='evenodd'
></path>
<path
fill='url(#paint7_linear)'
fillRule='evenodd'
d='M232.229 136.879c-2.082-2.662-5.714-3.302-8.113-1.43-2.398 1.872-2.655 5.547-.573 8.21 2.082 2.662 5.714 3.303 8.113 1.431 2.398-1.872 2.655-5.548.573-8.211z'
clipRule='evenodd'
></path>
</g>
<defs>
<filter
id='filter0_d'
width='315'
height='315'
x='0'
y='0'
colorInterpolationFilters='sRGB'
filterUnits='userSpaceOnUse'
>
<feFlood floodOpacity='0' result='BackgroundImageFix'></feFlood>
<feColorMatrix
in='SourceAlpha'
values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
></feColorMatrix>
<feOffset dy='20'></feOffset>
<feGaussianBlur stdDeviation='25'></feGaussianBlur>
<feColorMatrix values='0 0 0 0 1 0 0 0 0 0.431373 0 0 0 0 0.815686 0 0 0 0.4 0'></feColorMatrix>
<feBlend
in2='BackgroundImageFix'
result='effect1_dropShadow'
></feBlend>
<feBlend
in='SourceGraphic'
in2='effect1_dropShadow'
result='shape'
></feBlend>
</filter>
<linearGradient
id='paint0_linear'
x1='52.551'
x2='116.063'
y1='105.43'
y2='220.489'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#AEFF98'></stop>
<stop offset='1' stopColor='#FFBC4C'></stop>
</linearGradient>
<linearGradient
id='paint1_linear'
x1='-388.819'
x2='-336.97'
y1='49.634'
y2='410.633'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#FFDFA9'></stop>
<stop offset='1' stopColor='#FF54EC'></stop>
</linearGradient>
<linearGradient
id='paint2_linear'
x1='105.815'
x2='61.156'
y1='66.613'
y2='213.114'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#FF4DB3'></stop>
<stop offset='1' stopColor='#FF78D9'></stop>
</linearGradient>
<linearGradient
id='paint3_linear'
x1='142.941'
x2='146.348'
y1='47.303'
y2='256.385'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#FF91CE'></stop>
<stop offset='1' stopColor='#9650FF'></stop>
</linearGradient>
<linearGradient
id='paint4_linear'
x1='90.806'
x2='118.772'
y1='-12.145'
y2='130.147'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#73E9FF'></stop>
<stop offset='1' stopColor='#5888FF'></stop>
</linearGradient>
<linearGradient
id='paint5_linear'
x1='101.92'
x2='86.91'
y1='214.248'
y2='214.248'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#B261F2'></stop>
<stop offset='1' stopColor='#FF77D9'></stop>
</linearGradient>
<linearGradient
id='paint6_linear'
x1='94.095'
x2='86.022'
y1='134.222'
y2='138.883'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#FCBB5F'></stop>
<stop offset='1' stopColor='#FF9EC9'></stop>
</linearGradient>
<linearGradient
id='paint7_linear'
x1='225.33'
x2='228.158'
y1='140.355'
y2='143.975'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#FCA45F'></stop>
<stop offset='1' stopColor='#C76EE8'></stop>
</linearGradient>
</defs>
</svg>
)
}
export default Bg
这是我将文件导入到的页面
import React from 'react'
import Bg from './../svg/Bg'
const About = () => {
return (
<div className='container video'>
<div className='inner-container'>
<div className='video__grid'>
<div className='video__col video__col--text'>
<h2 className='video__title'>Workflow that just works</h2>
<p className='video__text'>
Collaboration should be simple, straightforward, and effective.
With Pitch, it is. Discuss current activities, manage tasks, and
stay productive as a team. Create on any device, online or
offline, and get great work done faster.
</p>
</div>
<div className='video__col'>
<Bg/>
</div>
</div>
</div>
</div>
)
}
export default About
谢谢！！！！
解决方案
也许是一个类名问题......通常从另一个软件导出 svg 时，它会以每个向量元素的默认名称导出。也许您正在寻找这个答案： https ://stackoverflow.com/a/67039230/15142235