logo标签列表

火狐浏览器中不显示SVG符号

cssfirefoxsvgiconssymbols
4

我目前正在使用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浏览器中打开链接，图标将不会被显示。

1
创建一个JSFiddle或其他能够显示问题的工具。通常来说，display: none不是个好的选择，但你可以尝试使用symbol来达到效果。 - Robert Longson
2
基础部分添加到 # 号前面，这样你的链接就不会指向你认为的位置了。 - Robert Longson
1
基本标签对于 AngularJS 是必需的，而且在 IE 和 Chrome 中一切正常，那么我需要做什么才能让链接在三个浏览器中都能工作？ - Bill
1
5个选项，请选择一个。a）删除基础标签。b）使基础标签始终为页面URL。c）对<use>href使用绝对URL。d）不要使用Firefox。e）将SVG移动到对象或iframe外部引用。 - Robert Longson
1
选项 b 和 c 如何在单页面应用程序中工作？我使用 HTML location，因此无论请求的页面是什么，我的索引页面都会被加载。如果我的 URL 当前为 http://example.com/main，<use> 链接需要是什么？我已经尝试过 http://example.com/main/#todo，http://example.com/#todo，http://example.com/todo，http://example.com/main/todo，但图标从未显示。 - Bill
显示剩余4条评论
2个回答
3
问题是：
<base href="/">

在Firefox中，使用“Remove”即可。

这不是一个可用的解决方案，例如 Angular HTML5 模式需要基础标签存在。以下是一种替代方法，可以帮助解决问题：https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2 - runfaj
1
在您的 jsfiddle 上，只需删除 CSS 部分中的以下代码块：
 </style>
    <base href="/">
    <style>

并且您的SVG将在Firefox上显示

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接