<svg> <use> in edge 没有出现 [angular 2]

Question

我有这段代码，它在 chrome:

中工作得很好

<html>
  <head>
    ...some tags
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
       <g id="overview">
         <path data-name="overview" d="M12.5,0A12.5,12.5,0,1,0,25,12.5h0A12.5,12.5,0,0,0,12.5,0Zm0,19C7.22,19,3,12.5,3,12.5S7.22,6,12.5,6,22,12.5,22,12.5,17.78,19,12.5,19Zm0-9.49a3,3,0,1,0,3,3,3,3,0,0,0-3-3Z"/>
       </g>
    </svg>
    <app>
      ..some tags
      <svg viewBox="0 0 25 25" width="25" height="25">
         <use xlink:href="#overview" />
      </svg>
      ..some tags
    </app>
  </body>
</html>

但在边缘，我什么也看不到。还尝试为其添加颜色（使用 fill）。再次，在 chrome 中工作，而不是在边缘

中工作

注意
这是一个 angular 2 应用程序，因此带有 use 标记的 svg 位于 angular 组件内并使用 angular 编译器

呈现

Answer 1

您正在使用 AngularJS 这一事实是一个很大的线索。

检查您的页面。如果您使用 angular 路由，那么您的 header 可能有一个 <base> 标签。如果是这种情况，那么您的 <use> 引用也需要包含页面 URL - 否则它们将像其他引用一样受到 <base> 的影响。

换句话说，您必须执行以下操作：

<use xlink:href="this-file.html#overview" />

或者可能

<use xlink:href="/path/to/this/file.html#overview" />

<svg> <use> in edge 没有出现 [angular 2]

<svg> <use> in edge doesn't appear [angular 2]

svg

angularjs

microsoft-edge

angular