如何解决为什么我的svg代码没有显示?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<defs>
<path id="prefix__a" d="M8 0c.19 0 .381.076.571.152 1.296.762 2.096 2.705 2.096 4.038v.905c0 .553.447 1 1 1h2.428c1.067 0 1.905.838 1.905 1.943v.038l-.762 6.057c0 1.029-.876 1.867-1.905 1.867H8c-1.029 0-2.095-.267-3.01-.724l-1.18-.571v-4.63c0-1.537.539-3.027 1.523-4.208l.191-.24c.863-1.14 1.333-2.534 1.333-3.97v-.514C6.857.495 7.39 0 8 0zM2.667 6.857c.228 0 .38.153.38.381v8.381c0 .229-.152.381-.38.381H.38C.152 16 0 15.848 0 15.619v-8.38c0-.23.152-.382.381-.382z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<use fill="#6C7D93" class="fill" xlink:href="#prefix__a"></use>
</g>
</svg>
我正试图在我的html页面中使此导出的svg工作,但是它不起作用。在chrome和我的代码编辑器上独立打开时,它可以完美工作。但是,当我在html页面中添加代码时,它没有显示。在使用Chrome进行检查时,我可以看到一个不可见的框。我怎样才能解决这个问题?但是,插入到同一页面中的所有其他svg都可以正常运行。
解决方法
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<defs>
<path id="prefix__a" d="M8 0c.19 0 .381.076.571.152 1.296.762 2.096 2.705 2.096 4.038v.905c0 .553.447 1 1 1h2.428c1.067 0 1.905.838 1.905 1.943v.038l-.762 6.057c0 1.029-.876 1.867-1.905 1.867H8c-1.029 0-2.095-.267-3.01-.724l-1.18-.571v-4.63c0-1.537.539-3.027 1.523-4.208l.191-.24c.863-1.14 1.333-2.534 1.333-3.97v-.514C6.857.495 7.39 0 8 0zM2.667 6.857c.228 0 .38.153.38.381v8.381c0 .229-.152.381-.38.381H.38C.152 16 0 15.848 0 15.619v-8.38c0-.23.152-.382.381-.382z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<use fill="#6C7D93" class="fill" xlink:href="#prefix__a"></use>
</g>
</svg>
检查
如果您的任何CSS代码都覆盖了上述SVG元素
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。