SVG-символы не отображаются в Firefox
В настоящее время я использую символы 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>
http://jsfiddle.net/r7ger34b/2/
Откройте ссылку в Chrome и появится значок. Откройте ссылку в Firefox, и значок не отображается.