时间戳

首页 > 解决方案 > 为什么我的 svg 代码没有显示？

html - 为什么我的 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>

我试图让这个导出的 svg 在我的 html 页面中工作，但它不起作用。在 chrome 和我的代码编辑器上独立打开时，它可以完美运行。但是当我在我的 html 页面中添加代码时，它没有显示出来。在使用 Chrome 进行检查时，我可以看到一个看不见的框。我怎样才能解决这个问题？但是，插入同一页面内的所有其他 svg 都可以完美运行。

标签： htmlsvgxhtml

解决方案

<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 元素

推荐阅读