Question

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

<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中的渐变消失。当我回到Startpage时，它会再次显示。

在Chrome上消失了
在Safari上变黑了
on Firefox all works

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

我确实把填充的样式作为属性，在css中 - 所有表现都相同

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

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

Answer 1

你的html中有<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <ul class="nav-justified"> <li><label><input class="ageSelect" type="radio" selected id="timeSpan" name="timeSpan" value="0"> <img class="ageSelectImg" src="css/img/checkbox_ofylld.png" /><br />0-2år </label></li> <li><label><input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="2"> <img class="ageSelectImg" src="css/img/checkbox_ofylld.png" /><br />2-10 år</label></li> <li><label><input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="10"><img class="ageSelectImg" src="css/img/checkbox_ofylld.png" /><br />10+ år</label></li> </ul>吗？

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

React Router - SVG中的url（＃...）路径失败

1 个答案: