我目前正在使用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: ```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浏览器中打开链接,图标将不会被显示。
<use>
href使用绝对URL。d)不要使用Firefox。e)将SVG移动到对象或iframe外部引用。 - Robert Longson