SAP(AngularJS和Angular Route)具有由svg-sprite制作的基于图标的导航.所以,我有这样的内联代码:
<div style="height: 0; width: 0; position: absolute; visibility: hidden">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-grid-32" viewBox="0 0 32 32">
<g stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round">
<path d="M2 2h11v11H2zM19 2h11v11H19zM2 19h11v11H2zM19 19h11v11H19z"/>
</g>
</symbol>
</svg>
</div>
导航中的图标如下:
<a href=""><svg class="icon icon-32 outline black"><use xlink:href="#icon-grid-32"></use></svg></a>
我在这个导航中看到的所有东西都没有,<use>大小为0×0像素.我知道有关xml:base的 Firefox bug,但添加xml:base对我没有帮助.你可以尝试这个例子:http://css.yoksel.ru/assets/demo/svg-in-firefox/svg-has-base.html
它适用于Firefox,Safari和其他浏览器,但不适用于Chrome 49+(48版本没有此问题).