Firefox中没有显示SVG符号 [英] SVG symbols not being displayed in Firefox
问题描述
我加载了
<？xml version =1.0encoding = UTF-8 >？;
< svg xmlns =http://www.w3.org/2000/svgstyle =display：none>
< symbol id =userviewBox =0 0 64 64>
<路径d =...>
< / symbol>
< / svg>
然后在我的视图中使用这样的符号：
< svg ng-class =typeclass =main-nav-icon>
< use xmlns：xlink =http://www.w3.org/1999/xlinkxlink：href =＃user>< / use>
< / svg>
使用以下css：
.main-nav-icon {
height：32px;
width：32px;
cursor：pointer;在Firefox中，svg标记在调试器中看起来像这样：
/ p>
< svg class =main-nav-iconng-class =type>< use xlink：href = ＃用户 >< /使用>< / SVG>
但是没有显示任何内容（虽然间距正确，这意味着正在显示一个32像素，它只是空的）。我需要做些什么才能做到这一点？
这是我的html头像：
<！doctype html>
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
< meta name =apple-mobile-web-app-capablecontent =yes/>
< meta name =apple-mobile-web-app-status-bar-stylecontent =black/>
< link rel =快捷图标href =favicon.ico/>
< link rel =stylesheethref =/ styles / vendor-app.css>
< base href =/>
< / head>
更新了JsFiddle来展示问题
< a href =http://jsfiddle.net/r7ger34b/2/ =nofollow> http://jsfiddle.net/r7ger34b/2/
在Chrome中打开链接并显示图标。
在Firefox中打开链接，不显示图标。
解决方案问题是：
$ b
< base href =/>
删除可以在Firefox中使用。
I'm currently using SVG symbols to display icons. This works in IE, Chrome, and Safari but the icons don't show up in Firefox. There are lots of similar questions on StackOverflow but most of them are older or aren't using symbols.
I'm loading all of the icons in index.html using the following markup:
<?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>
I then use the symbols like this within my views:
<svg ng-class="type" class="main-nav-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
</svg>
With the following css:
.main-nav-icon {
height: 32px;
width: 32px;
cursor: pointer;
}
In Firefox, the svg markup ends up looking like this in the debugger:
<svg class="main-nav-icon" ng-class="type"><use xlink:href="#user"></use></svg>
But nothing is being displayed (although the spacing is correct meaning a 32px by 32px element is being displayed, it's just empty). What do I need to do to make this work?
This is what the head of my html looks like:
<!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>
Updated JsFiddle demonstrating the problem
http://jsfiddle.net/r7ger34b/2/
Open the link in Chrome and the icon is displayed.
Open the link in Firefox and no icon is displayed.
解决方案 The problem is:
<base href="/">
Remove that will work in the Firefox.
这篇关于Firefox中没有显示SVG符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
