【发布时间】：2015-02-03 02:01:19
【问题描述】：
我目前正在使用 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>
但是什么都没有显示（虽然间距是正确的，这意味着正在显示 32 像素乘 32 像素的元素，但它只是空的）。我需要做什么才能完成这项工作？
这是我的 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 中打开链接，没有图标显示。
【问题讨论】：
-
创建一个 jsfiddle 或实际显示问题的东西。显示 none 通常不是一个好主意，但带有一个符号您可能会侥幸逃脱。
-
base 位于 # 前面，因此您的链接不会指向您认为的位置。
-
AngularJS 需要基本标签，并且一切都在 IE 和 Chrome 中运行，所以我需要做什么才能让链接在所有三个中运行？
-
5 个选项，选择一个。 a) 删除基本标签。 b) 使基本标记始终是页面 URL。 c) 对
<use>hrefs 使用绝对 URL d) 不要使用 Firefox。 e) 将 SVG 移动到对象或 iframe 外部引用。 -
选项 b 和 c 如何与单页应用程序一起使用？我正在使用 HTML 位置，因此无论请求的页面如何，都会加载我的索引页面。如果我的 URL 当前是 example.com/main
<use>链接需要是什么？我试过example.com/main/#todo、example.com/#todo、example.com/todo、example.com/main/todo，但图标从未显示。
标签： css firefox svg icons symbols