stackyname stackyname - 7 months ago 55
HTML Question

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>
)
}

Uzi Uzi
Answer

classic camelCase.

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

(mind that react expects camel case properties)

Comments