时间戳

首页 > 解决方案 > 内联 SVG 不仅在 Firefox 上显示

svg - 内联 SVG 不仅在 Firefox 上显示

问题描述

我在 IcoMoon 上获得了我的 SVG，我集成它们的方式如下：

我的项目中有一个“sprite.svg”文件，其中包含所有“符号”，例如：

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-search" viewBox="0 0 32 32">
<path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path>
</symbol>
<symbol id="icon-facebook" viewBox="0 0 32 32">
<path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path>
</symbol>
    ... and so on
</defs>
</svg>

然后在我的 HTML 中：

<svg class="icon icon-twitter">
<use xlink:href="sprite.svg#icon-twitter"></use>
</svg>

然后我用 CSS 设置高度/宽度/颜色

    .icon {
      fill: $color-white;
      height: 2rem;
      width: 2rem;
    }

它在任何地方都可以使用，除了 Firefox，它不会显示我的任何 SVG。知道发生了什么吗？

编辑： SVG 在 DOM 中很好，当我用检查器将鼠标悬停在它们上时，它显示了它们占用的空间，它们只是不显示

编辑 2：我使用我猜想的传统方式使其工作，即不使用 sprite.svg 文件：

     <svg class="icon icon-chevron-down--filter-by"  viewBox="0 0 20 20" >
              <path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path>
     </svg>

Firefox 现在可以识别图标，但我仍然更喜欢只使用<use xlink:href="sprite.svg#icon-search"></use>而不是每次都传递整个路径......如果你们有解决方案，那就太酷了，否则，好吧，至少它可以工作

标签： svgfirefox

解决方案

修复了它，实际上<symbol>我的 sprite.svg 文件中有一个未关闭的标签，它把所有东西都搞砸了，这就是我的大多数 SVG 没有显示的原因

推荐阅读