Question

    <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都可以正常运行。

Answer 1

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

为什么我的svg代码没有显示？

1 个答案: