Svg Lineargradient not working with ReactJs

Question

Please help me to find the issue why svg linear gradient is not working with 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>

First make sure the SVG renders correct without React. Maybe the stroke should be `stroke='url(#bgGradient)'` — Kunukn, Dec 09 '17 at 20:59
Possible duplicate - https://stackoverflow.com/questions/37962071/react-js-use-svg-linear-gradient-not-working — Kunukn, Dec 09 '17 at 21:04
thanks @kunukn, I have tried this stroke='url(#bgGradient)' but still not working — Achyut Kr Deka, Dec 09 '17 at 21:07

Michael Mullany · Accepted Answer · 2017-12-11T23:16:31.753

4

This is a syntax error:

linearGradient NOT lineargradient

If this is generated SVG (and not a React Template - it's not clear what you're showing here) - you should be using SVG syntax, not React syntax. AKA:

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

In SVG, attribute names are generally lowercase and dashed, element names are Camel cased and concatenated. The one exception is with filter primitive attributes - which confusingly - are also Camel case (e.g tableValues)

edited Dec 11 '17 at 23:16

answered Dec 10 '17 at 00:10

Michael Mullany

30,283
6
81
105

That is what I thought first, too. But then I saw [React DOM Elements](https://reactjs.org/docs/dom-elements.html). SVG attributes are listed verbatim at the bottom as to be used in camelCase. – ccprog Dec 10 '17 at 14:20
1

Ah. I thought he was showing us the generated SVG, not the React template. Ignore then. – Michael Mullany Dec 11 '17 at 05:41
Thanks @Michael Mullany – Achyut Kr Deka Dec 11 '17 at 13:14

score 1 · Answer 2 · answered Dec 10 '17 at 18:12

I'll add to the list of syntax errors Michael Mullany's

stop offset NOT offset

Seemingly minor mistake, but no corrections code not working

In the end, after all errors have been corrected, - working code

 <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 not working with ReactJs

2 Answers2