【发布时间】：2017-12-07 21:18:23
【问题描述】：
我对@987654328@ 规范与<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>
this article 也是如此，Chris Coyier 在this article 中更是如此，他明确指出<symbol> 是一个更好的标签，因为在引用它时不需要viewBox。
但是，用viewBox 引用符号对我不起作用，我最终会遇到与this SO question 相同的错误，这得出结论，事实上，在引用a 时需要viewBox <symbol>。 This article 甚至提出了一种处理“内在 svg 大小”的技巧。
确实，在这个简短的jsfiddle/sn-p 中，您可以看到，如果我将视图框添加到<svg> 引用中，则使用单个<symbol>，它的大小是正确的，没有任何空格。然而，移除视图框后，顶部和底部都有很大的“边距”。
<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>s 的方式发生了变化？
谢谢！
【问题讨论】：
-
你想用js来操作你的svg吗？或者你可以在 img 标签中加载它并使用 css 设置尺寸。
-
两种情况下的用法是相同的，包含