Question

我在Meteor中使用React。

当我向React组件添加SVG时，不应用样式。但是，相同的代码在纯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>

React组件：

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

Answer 1

经典的camelCase。

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

（请注意，反应需要驼峰案例属性）

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

1 个答案: