陣營路由器 - 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失敗

回答

相關問題