CODEWITHSUNDEEP
reactjssvg
Rajnish Kumar
Rajnish Kumar

Reputation: 2938

How to pass style in svg tag in React?

I am trying to pass

<svg class="svg-abs svg-f-btm" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            viewBox="0 0 1920 140" style="margin-bottom: -9px; backgroundImage:new 0 0 1920 140;" xmlSpace="preserve">
            <path class="svg-gray" d="M960,92.9C811.4,93.3,662.8,89.4,515.3,79c-138.6-9.8-277.1-26.2-409-53.3C97.8,24,0,6.5,0,0c0,0,0,140,0,140
              l960-1.2l960,1.2c0,0,0-140,0-140c0,2.7-42.1,11.3-45.8,12.2c-45.1,11-91.5,20.1-138.4,28.1c-176.2,30.1-359.9,43.8-542.9,48.9
              C1115.4,91.4,1037.7,92.7,960,92.9z"></path>
        </svg>

This thing in React component but getting error at 

style="margin-bottom: -9px; backgroundImage:new 0 0 1920 140;"

How can I correct it?

Upvotes: 0

Views: 1226

Answers (2)

Manish Pant
Manish Pant

Reputation: 42

you need to do like this

style={{marginBottom: “-9px”, backgroundImage: “new 0 0 1920 140”}}

Upvotes: 1

Josef
Josef

Reputation: 91

in react you pass it like this: style={{ marginBottom: -9px; backgroundImage: new 0 0 1920 140 }}, for the property remove '-' and use camelCase

Upvotes: 0

Related Questions