普通HTML中的彩色SVG在React中都是黑色的。为什么？

我在《流星》中使用React

将SVG添加到React组件时，不会应用样式。但同样的代码在普通HTML中也能正常工作

以下是我的SVG代码：

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

反应组分：

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

render（）{
返回(
)
}

经典的骆驼皮箱

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

---

（请注意，react需要大小写属性）

此SVG工作正常，哪里有不适合您的代码？因为这就是你要问的问题，所以我们需要看看你在做什么（当然是简化形式，不是几百行文件）@Mike'Pomax'Kamermans我添加了React组件的简化版本。那只是你的渲染函数，不是组件。通过删除与放置SVG无关的JSX，并在其周围添加React代码，使其成为一个真实的组件，人们可以将过去的内容复制到一个示例或类似的示例中（或者更好的是，您提供了一个链接），这样人们都可以看到您花了时间调试这个问题（减少通常会让你自己发现问题），并花时间确保他们不会花很多时间只是为了复制。呃，我不相信这是原因。第一个“类”与“类名”，现在是这个。无论如何，非常感谢！哈哈，是的，我在找其他人。再次感谢！我只能建议你使用这样的工具来为你清理文件，而不是手工。干杯！