React Router - SVG 中的 url(#...) 路径失败答案

【问题标题】：React Router - url(#...) paths in SVG failReact Router - SVG 中的 url(#...) 路径失败
【发布时间】：2017-09-13 00:24:35
【问题描述】：

我不确定我是否正确缩小了问题范围：

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

在AppComponent 中有这个 JSX 渲染模板：

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

当我访问应用程序时，一切都显示正确，当我单击菜单点页面时，渐变从 SVG 中消失。当我返回起始页时，它会再次显示。

在 Chrome 上消失了
在 Safari 上变黑
在 Firefox 上一切正常

如果我这样做 fill="red" 一切正常，所以我的猜测是，更改页面后找不到 url(#grad1)。

我确实将样式中的填充作为一个属性放在 css 中——所有行为都相同

我尝试通过url(/#grad1)链接，但这在任何浏览器中都不起作用。我还尝试将所有渐变放在一个 SVG 文件中，并使用 url(/img/helper.svg#grad1) 链接到它，但这也不起作用。

有人知道发生了什么吗？任何帮助将不胜感激。

【问题讨论】：

标签： svg reactjs react-router

【解决方案1】：

您的 html 中有 <base href="/" /> 吗？

一旦我删除它，一切都按预期工作。

【讨论】：