Question

我试图使用带有xlink:href属性的svgs，但它没有显示出来。如果我在一个全新的项目上尝试它，它工作正常。我还尝试在一个新的angular2 webpack项目中查看它是否与angular2相关，但它在那里也能很好地工作。

我将其包含在我的组件的顶部（我还尝试将其放在index.html文件中）。

<svg style="display:none">
    <symbol id="Icon-Gplus" viewBox="0 0 256 256">
        <title>Gplus icon</title>
        <path d="M80.6 111.8v27.6h45.7c-1.8 11.9-13.8 34.8-45.7 34.8-27.5 0-50-22.8-50-50.9s22.5-50.9 50-50.9c15.7 0 26.1 6.7 32.1 12.4l21.9-21.1c-14.1-13.1-32.3-21.1-54-21.1C36.1 42.6 0 78.7 0 123.3s36.1 80.6 80.6 80.6c46.5 0 77.4-32.7 77.4-78.8 0-5.3-.6-9.3-1.3-13.4H80.6v.1zM253.4 111.8h-23v-23h-23v23h-23v23h23v23h23v-23h23"></path>
    </symbol>
</svg>

如果我试试这个，没有svg出现。值得注意的是，它的框似乎在那里，但没有任何填充更改可以让它可见。

<svg viewBox="0 0 256 256">
     <use xlink:href="#Icon-Gplus"></use>                
</svg>

如果我这样做，那就很有效。

<svg viewBox="0 0 256 256">
     <path d="M80.6 111.8v27.6h45.7c-1.8 11.9-13.8 34.8-45.7 34.8-27.5 0-50-22.8-50-50.9s22.5-50.9 50-50.9c15.7 0 26.1 6.7 32.1 12.4l21.9-21.1c-14.1-13.1-32.3-21.1-54-21.1C36.1 42.6 0 78.7 0 123.3s36.1 80.6 80.6 80.6c46.5 0 77.4-32.7 77.4-78.8 0-5.3-.6-9.3-1.3-13.4H80.6v.1zM253.4 111.8h-23v-23h-23v23h-23v23h23v23h23v-23h23"></path>
</svg>

我不确定现在还要调试什么。如何在主html代码之外的某处引用svg？

使用<use>

0 个答案: