内联SVGs不只是显示在Firefox上
内联SVGs不只是显示在Firefox上
提问于 2021-03-04 09:48:29
我在IcoMoon上获得了SVGs，集成它们的方式如下：
我的项目中有一个"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;
}它可以在任何地方工作，除了火狐，它不会显示任何我的SVG。知道怎么回事吗？
编辑： SVGs在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>火狐现在可以识别图标，但我还是更喜欢使用<use xlink:href="sprite.svg#icon-search"></use>，而不是每次传递整个路径.如果你们有一个解决方案，那就很酷，否则，好吧，至少有效
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-06 14:07:03
修复了它，实际上我的sprite.svg文件中有一个未关闭的sprite.svg标记，它破坏了所有的东西，这也是为什么我的SVGs大部分没有显示出来的原因。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66472497
复制相关文章
相似问题
腾讯云开发者
