Geek Answers Handbook

SVG Symbols Not Displayed in Firefox

I am currently using SVG characters to display icons. This works in IE, Chrome and Safari, but the icons do not appear in Firefox. StackOverflow has a lot of similar questions, but most of them are older or don't use characters.

I load all the icons into index.htmlusing the following markup:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
    <symbol id="user" viewBox="0 0 64 64">
        <path d="...">
    </symbol>
</svg>

Then I use the following characters in my views:

<svg ng-class="type" class="main-nav-icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
</svg>

With the following css:

.main-nav-icon {
  height: 32px;
  width: 32px;
  cursor: pointer;
}

In Firefox, svg markup ends the same way in the debugger:

<svg class="main-nav-icon" ng-class="type"><use xlink:href="#user"></use></svg>

But nothing is displayed (although the interval is correct, it means that 32px is mapped to a 32px element, it is simply empty). What do I need to do to make this work?

Here is what my html chapter looks like:

<!doctype html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="/styles/vendor-app.css">
    <base href="/">
  </head>

Updated JsFiddle showing issue

http://jsfiddle.net/r7ger34b/2/

Chrome . Firefox .

+4
2

:

<base href="/">

, Firefox.

+3

jsfiddle, css :

 </style>
    <base href="/">
    <style>

svg firefox

0

More articles:


All Articles