CODEWITHSUNDEEP
angularjsangularsvgmicrosoft-edge
Yonatan
Yonatan

Reputation: 1377

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

I have this code, which works perfectly fine in 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>

But in edge, I see nothing. Also tried to add color to it (with fill). again, works in chrome, not in edge

NOTE
It's an angular 2 app, so the svg with the use tag is inside the angular component and rendered with angular compiler

Upvotes: 0

Views: 678

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

The fact that you are using AngularJS is a big clue.

Check your page. If you are using angular routing, then your header may have a <base> tag. If that is the case, then your <use> references will need to include the page URL as well - otherwise they will be affected by the <base> like other references.

In other words, you would have to do something like:

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

or possibly

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

Upvotes: 1

Related Questions