{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 贪生不怕死 的问题《SVG symbols not being displayed in Firefox》','https://www.manongdao.com/q-331091.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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:
Remove that will work in the Firefox.
on your jsfiddle, just remove on css part the block :
and your svg will show on firefox