SVG symbols not being displayed in Firefox

问题

I'm currently using SVG symbols to display icons. This works in IE, Chrome, and Safari but the icons don't show up in Firefox. There are lots of similar questions on StackOverflow but most of them are older or aren't using symbols.

I'm loading all of the icons in index.html using 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>

I then use the symbols like this within 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, the svg markup ends up looking like this in the debugger:

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

But nothing is being displayed (although the spacing is correct meaning a 32px by 32px element is being displayed, it's just empty). What do I need to do to make this work?

This is what the head of my html 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 demonstrating the problem

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

Open the link in Chrome and the icon is displayed. Open the link in Firefox and no icon is displayed.

回答1:

The problem is:

<base href="/">

Remove that will work in the Firefox.

回答2:

on your jsfiddle, just remove on css part the block :

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

and your svg will show on firefox

来源：https://stackoverflow.com/questions/27306759/svg-symbols-not-being-displayed-in-firefox

标签

css

firefox

svg

icons

symbols