SVG 符号未在 Firefox 中显示
Posted
技术标签:
【中文标题】SVG 符号未在 Firefox 中显示【英文标题】：SVG symbols not being displayed in Firefox 【发布时间】：2015-02-03 02:01:19 【问题描述】：我目前正在使用 SVG 符号来显示图标。这适用于 IE、Chrome 和 Safari，但图标不会显示在 Firefox 中。 *** 上有很多类似的问题，但大多数都较旧或没有使用符号。
我正在使用以下标记加载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，但图标从未显示。
【参考方案1】：
问题是：
<base href="/">
删除将在 Firefox 中运行。
【讨论】：
对于像 angular html5 模式这样需要基本标记到位的东西，这不是一个可用的解决方案。这是一个有助于修复它的替代方法：gist.github.com/leonderijke/c5cf7c5b2e424c0061d2【参考方案2】：在您的 jsfiddle 上，只需删除 css 部分的块：
</style>
<base href="/">
<style>
您的 svg 将显示在 firefox 上
【讨论】：
以上是关于SVG 符号未在 Firefox 中显示的主要内容，如果未能解决你的问题，请参考以下文章
CSS 大纲属性未在 Firefox 中显示为 SVG 图像？
Div 未在 Google chrome 中显示（在 Firefox 中显示）[重复]