Question

出于某种原因，我无法在Firefox（版本31）上显示SVG图标，即使我从IcoMoon的示例文件中复制了完全相同的定义和代码，这些文件工作正常。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>@ViewBag.Title</title>
  <base href=@ConfigurationManager.AppSettings["AppBaseUrl"] />
  @Styles.Render("~/css")

  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<style>
  .icon { display: inline-block; width: 32px; height: 32px; fill: #000; }
  .icon-search { fill: #000; }
</style>
<body>
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="368" height="32" viewBox="0 0 368 32">
  <defs>
    <g id="icon-search">
      <path class="path1" d="M186.685 21.653c0 0.162-0.131 0.294-0.294 0.294h-2.816c-0.163 0-0.294-0.132-0.294-0.294v-9.631c0-0.162 0.131-0.294 0.294-0.294h2.816c0.163 0 0.294 0.132 0.294 0.294v9.631zM184.983 26.652c-0.914 0-1.656-0.743-1.656-1.656s0.744-1.656 1.656-1.656 1.656 0.743 1.656 1.656-0.743 1.656-1.656 1.656z"></path>
      <path class="path2" d="M25.539 14.308c0 4.16-3.385 7.534-7.56 7.534-4.174 0-7.559-3.374-7.559-7.534 0-4.161 3.385-7.534 7.559-7.534 4.175-0.001 7.56 3.373 7.56 7.534zM29.541 14.308c0-6.365-5.176-11.524-11.562-11.524-6.386 0-11.561 5.159-11.561 11.524 0 2.564 0.851 4.925 2.272 6.84l-5.83 5.81 2.517 2.507 5.842-5.823c1.902 1.372 4.234 2.189 6.759 2.189 6.386 0 11.563-5.158 11.563-11.522z"></path>
    </g>
  </defs>
</svg>
<section>
  <svg class="icon icon-search" viewBox="0 0 32 32"><use xlink:href="#icon-search"></use></svg>
</section>
</body>
</html>

以下是演示：http://jsfiddle.net/3u9LU/

其他所有浏览器都运行正常，但Firefox并不适用。造成这种情况的原因是什么？

Answer 1

问题是使用<base href="/">会使Firefox与SVG处理混淆。

如果移除了<base> - 标记，则SVG会显示出来。

以下是演示：http://jsfiddle.net/3u9LU/2/

SVG（icomoon）没有出现在Firefox上

1 个答案: