CODEWITHSUNDEEP
htmlsvgreactjs
stackyname
stackyname

Reputation: 526

A colorful SVG in plain HTML is all black in React. Why?

I'm using React in Meteor.

When I add an SVG to the React component, style is not applied. But the very same code is working as expected in a plain HTML.

Here is my SVG code:

<svg viewBox="0 0 1031 475" preserveAspectRatio="none">
  <defs>
    <linearGradient x1="100%" y1="0%" x2="0%" y2="25%" id="front-rainbow-gradient">
      <stop stop-color="#00D7B9" offset="0%"/>
      <stop stop-color="#B95DD7" offset="50%"/>
      <stop stop-color="#FFB367" offset="100%"/>
    </linearGradient>
  </defs>
  <path d="M0 475h1031V0C630.46 33.34 270 208.52 0 475z"
    fill="url(#front-rainbow-gradient)" fill-opacity="0.65" />
</svg>

The React component:

render () {
  return (
    <div>
      <div className="main-header">
        <svg viewBox="0 0 1031 475" preserveAspectRatio="none">
          <defs>
            <linearGradient x1="100%" y1="0%" x2="0%" y2="25%" id="front-rainbow-gradient">
              <stop stop-color="#00D7B9" offset="0%"/>
              <stop stop-color="#B95DD7" offset="50%"/>
              <stop stop-color="#FFB367" offset="100%"/>
            </linearGradient>
          </defs>
          <path d="M0 475h1031V0C630.46 33.34 270 208.52 0 475z"
            fill="url(#front-rainbow-gradient)" fill-opacity="0.65" />
        </svg>
      </div>
      <div className="latest">
      <Container />
      </div>
      </div>
  )
  }

Upvotes: 3

Views: 3866

Answers (1)

Uzi
Uzi

Reputation: 2644

classic camelCase. 

   <stop stopColor="#00D7B9" offset="0%"/>
   <stop stopColor="#B95DD7" offset="50%"/>
   <stop stopColor="#FFB367" offset="100%"/>

(mind that react expects camel case properties)

Upvotes: 9

Related Questions