内联svg精灵空白问题

Question

在Chrome和Firefox中（尚未在其他地方进行过测试），我在svg上方和下方看到了一大块白色空间。

我正在使用内联svg精灵表（使用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>

以下是一个例子：

http://codepen.io/magicspon/pen/dPVKZm

如何删除此空格？

任何想法

由于

Answer 1

您的viewBox宽高比与其显示的形状不对应。它显示的形状为300 x 150，因为您还没有为<svg>提供任何尺寸object（具有class =＆＃34; sym＆＃34;属性的那个）。

所以你可以

• 使用宽高比111.2：33或
给出<svg>元素的宽度和高度
• 添加preserveAspectRatio =＆＃34; none＆＃34;属性为<symbol>元素

取决于您想要显示的内容