Reagieren Router - url (# ...) Wege in SVG fail

Question

Ich bin nicht ganz sicher, ob ich richtig das Problem eingrenzen:

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

In AppComponent da diese JSX ist Render Vorlage:

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

Wenn ich die Anwendung besuche, wird alles korrekt angezeigt, wenn ich auf den Menüpunkt "Gradient verschwindet vom SVG" klicke. Wenn ich zurück zur Startseite gehe, wird es wieder angezeigt.

• auf Chrome es
• auf Safari verschwindet verwandelt es schwarz
• auf Firefox alle

funktioniert, wenn ich fill="red" tun alles funktioniert gut, so meine Vermutung ist, dass url(#grad1) nicht nach dem Ändern gefunden Die Seite.

Ich habe die Füllung im Stil, als ein Attribut, in der CSS setzen - alle die gleichen

ich über url(/#grad1) aber diese did't Arbeit in jedem Browser zu verknüpfen versuchte benommen. Ich habe auch versucht, alle Verläufe in eine SVG-Datei zu stellen und mit url(/img/helper.svg#grad1) verbunden, aber das hat auch nicht funktioniert.

Weiß jemand, was vor sich geht? Jede Hilfe wäre sehr willkommen.

Answer 1

Haben Sie eine <base href="/" /> in Ihrem HTML?

Sobald ich das entfernte, funktionierte alles wie erwartet.