内联svg精灵空白问题

在Chrome和Firefox（尚未在其他地方测试）中，我看到svg上下都有一大块空白

我正在使用一个内嵌的svg sprite表（使用gulp svgstore构建），并通过符号id引用svg

html

<svg style="display: none;" xmlns="http://www.w3.org/2000/svg"><symbol id="test" viewBox="0 0 111.2 33"><g></g><g>  <rect x="0" y="0" fill="#843B8F" width="111.2" height="33"/></g></symbol></svg>

<svg class="sym">
   <use xlink:href="#test"></use>
</svg>

以下是一个例子：

如何删除此空白

有什么想法吗

---

谢谢，您的viewBox纵横比与其显示的形状不一致。它所显示的形状为300 x 150，因为您尚未向该

对象（具有class=“sym”属性的对象）提供任何尺寸

所以你也可以

• 给出长宽比为111.2:33或
• 向
  元素添加一个preserveSpectratio=“none”属性

根据您想要显示的内容，

preserveAspectRatio=“none”似乎已经完成了工作，还没有完全测试过，但看起来不错。。。非常感谢