阵营路由器 - URL（＃...）路径在SVG失败

我不能完全肯定，如果我已经正确地缩小问题：阵营路由器 - URL（＃...）路径在SVG失败

<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)链接，但是这也不起作用。

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

来源

2016-04-30 Florian Bauer

你有没有在你的HTML <base href="/" />？

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

来源

2016-05-09 21:30:47 Sailias

阵营路由器 - URL（＃...）路径在SVG失败

回答

相关问题