反应路由器-SVG中的url（#…）路径失败

我不能完全确定我是否正确地缩小了问题的范围：

<Router history={hashHistory}>
 <Route path="/" component={AppComponent}>
  <IndexRoute component={StartComponent} />
  <Route path="page" component={PageComponent} />
 </Route>
</Router>

当我访问应用程序时，所有内容都正确显示，当我单击菜单点页面时，SVG中的渐变消失了。当我回到起始页时，它再次显示

• 在铬上它消失了
• 在狩猎时它会变成黑色
• 在Firefox上，一切正常

如果我做了

fill=“red”

所有操作都正常，那么我的猜测是，更改页面后找不到

url（#grad1）

我确实在样式中添加了填充，作为css中的一个属性，所有的行为都是一样的

我试图通过

url（/#grad1）

链接，但在任何浏览器中都不起作用。我还尝试将所有渐变放在一个SVG文件中，并使用

url（/img/helper.SVG#grad1）

链接到它，但这也不起作用

有人知道发生了什么事吗？非常感谢您的帮助。

您的html中是否有

一旦我把它去掉，一切都按预期进行

<div>
 <section className="content row">
   <ReactCSSTransitionGrouptransitionName="a">
    {React.cloneElement(this.props.children, { key: pathname })}
   </ReactCSSTransitionGroup>
  </section>
  <ul>
   <li><Link to="/">
    <svg version="1.1">
     <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0" stopColor="#56697B"/>
        <stop offset="1" stopColor="#7F99B4"/>
      </linearGradient>
     </defs>
     <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
    </svg>

   </Link></li>
   <li><Link to="/page">Page</Link></li>
  </ul>
 </div>