我对
在css-tricks上,
同样适用于这篇文章,更是在Chris Coyier的这篇文章中明确指出,
然而,对我来说,使用带有
确实,在这个简短的jsfiddle/snippet中,你可以看到只需一个
那么关于
<svg>
规范与<use>
标签的关系非常困惑,因为我在网上阅读的所有内容似乎都是使用微妙的不同之处实现该标签。在css-tricks上,
<svg>
在<symbol>
中添加了viewBox
:<svg style="display: none;">
<defs>
<symbol id="basketball" viewBox="0 0 100 100">
<title>Basketball</title>
<path d="M28.1,3 ... "/>
</symbol>
</defs>
</svg>
然后<symbol>
标签只需使用id
进行引用:
<svg class="icon-basketball">
<use xlink:href="#basketball"></use>
</svg>
同样适用于这篇文章,更是在Chris Coyier的这篇文章中明确指出,
<symbol>
标签更好,因为在引用它时不需要viewBox
。然而,对我来说,使用带有
viewBox
的符号并不能正常工作,我最终遇到了与这个SO问题相同的错误,结论是在引用<symbol>
时确实需要viewBox
。甚至这篇文章提出了一种处理“内在SVG大小”的方法。确实,在这个简短的jsfiddle/snippet中,你可以看到只需一个
<symbol>
,如果我将viewbox添加到<svg>
引用中,则其大小会正确调整,没有任何空白。然而,如果删除viewbox,则顶部和底部会有大的“边距”。
<link href="https://unpkg.com/tachyons@4.9.0/css/tachyons.min.css" rel="stylesheet"/>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap" id="zap"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" /></symbol></defs></svg>
<div class="tc">
<!-- svg is always oversized -->
<svg class="outline w3 bg-red">
<use xlink:href="#zap"></use>
</svg>
<!-- svg is the correct size -->
<svg class="outline w3 bg-green" viewBox="0 0 24 24">
<use class="black" xlink:href="#zap"></use>
</svg>
</div>
<use>
,我哪里做错了?是我定义<symbol>
的方式有问题吗?目前这个符号是通过webpack上的svg-sprite生成的。还是说最近<svg>
外部引用的方式发生了变化?谢谢!