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中工作，而不是在边缘

注意
它是一个有角度的2应用程序，因此带有svg标记的use位于角度组件内并使用角度编译器进行渲染

Answer 1

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

检查您的页面。如果您使用的是角度路由，那么您的标头可能会有<base>标记。如果是这种情况，那么您的<use>引用也需要包含网页网址 - 否则它们会像<base>一样受到其他引用的影响。

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

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

或可能

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

边缘的<svg> <use>不会出现[angular 2]

1 个答案: