Question

请帮我找到svg线性渐变无法使用react

的问题

     <svg width='258' height='229' viewBox='0 0 258 229' >
        <defs>
            <lineargradient x1='.258%' y1='49.75%' x2='101.258%' y2='49.75%' id='bgGradient'>
                <stop stopColor='#3023AE' offset='0%' />
                <stop stopColor='#53A0FD' offset='47.525%' />
                <stop stopColor='#B4EC51' offset='100%' />
            </lineargradient>
        </defs>
        <g id='Page6' fill='none' fillRule='evenodd' strokeLinecap='round'>
            <path d='M10.1757812,18.984375 C183.016927,-13.7135417 261.63151,52.9101563 246.019531,218.855469'
            id='Path7' stroke='url(#bgGradient)' strokeWidth='20' />
        </g>
    </svg>

Answer 1

这是语法错误：

linearGradient NOT lineargradient

如果这是生成SVG（而不是React模板 - 它不清楚你在这里显示的内容） - 你应该使用SVG语法，而不是React语法。 AKA：

stop-color NOT stopColor
stroke-width NOT strokeWidth
fill-rule NOT fillRule
stroke-linecap NOT strokeLinecap

在SVG中，属性名称通常是小写和虚线，元素名称是Camel cased和concatenated。一个例外是过滤器原始属性 - 这容易引起混淆 - 也是Camel案例（例如tableValues）

Answer 2

我将添加Michael Mullany的语法错误列表

停止偏移NOT偏移

看似轻微的错误，但没有更正代码无效

最后，在纠正所有错误之后， - 工作代码

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='258' height='229' viewBox='0 0 258 229' >
       <defs>
	
		<linearGradient   x1='.258%' y1='49.75%' x2='101.258%' y2='49.75%' id='bgGradient' > 
		
                <stop offset='47.525%'  stop-color='#3023AE'  />
                <stop offset='47.525%' stop-color='#53A0FD'  /> 
				<stop offset='100%' stop-color='#B4EC51'  /> 
	   </linearGradient>
</defs>
        <g id='Page6' fill='none' fill-rule='evenodd' stroke-linecap='round'>
            <path d='M10.1757812,18.984375 C183.016927,-13.7135417 261.63151,52.9101563 246.019531,218.855469'
            id='Path7'  stroke-width='20'  stroke="url(#bgGradient)" />
        </g>
	</svg>

Svg Lineargradient不使用ReactJs

2 个答案: