纯色HTML中的彩色SVG在React中全部为黑色。为什么？ [英] A colorful SVG in plain HTML is all black in React. Why?

问题描述

当我将一个SVG添加到React组件时，style不适用。但是，相同的代码在纯HTML中按预期工作。

这是我的SVG代码：

 < svg viewBox =0 0 1031 475preserveAspectRatio =none> 
< defs> 
    < / linearGradient> 
< / defs> 
  fill =url（＃front-rainbow-gradient）fill-opacity =0.65/> 
< / svg> 
  

React组件：

  render（）{
 return（
< div> 
< div className =main-header> 
< svg viewBox = 0 0 1031 475preserveAspectRatio =none> 
< defs> 
< linearGradient x1 =100％y1 =0％x2 =0％y2 =25 
 < stop stop-color =＃ B95DD7offset =50％/> 
< stop stop-color =＃FFB367offset =100％/> 
< / linearGradient> 
< / defs> 
<路径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> 
）
} 
  

解决方案

classic camelCase。

 < stop stopColor =＃00D7B9offset =0％/> 
    

（介意反应需要骆驼属性）

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

解决方案

classic camelCase.

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

(mind that react expects camel case properties)

这篇关于纯色HTML中的彩色SVG在React中全部为黑色。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！