Question

我目前正在使用SVG符号来显示图标。这适用于IE，Chrome和Safari，但这些图标不会显示在Firefox中。 StackOverflow上有很多类似的问题，但大多数都是旧的或者没有使用符号。

我使用以下标记加载index.html中的所有图标：

<?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>

然后我在我的观点中使用这样的符号：

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

使用以下css：

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

在Firefox中，svg标记最终在调试器中看起来像这样：

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

但是没有显示任何内容（虽然间距正确意味着显示32px x 32px元素，但它只是空的）。我需要做些什么来完成这项工作？

这就是我的html头像：

<!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>

更新了JsFiddle演示问题

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

在Chrome中打开链接，系统会显示图标。在Firefox中打开链接，不显示任何图标。

Answer 1

问题是：

<base href="/">

删除它将在Firefox中运行。

Answer 2

在你的jsfiddle上，只需删除css部分的块：

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

你的svg会在firefox上显示

SVG符号未在Firefox中显示

更新了JsFiddle演示问题

2 个答案: