svg - 内联 svg Sprite 空白问题

Question

在 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>

这是一个例子:

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

如何删除这个空白区域？

任何想法

谢谢

Answer 1

您的 viewBox 纵横比与其显示的形状不符。它显示的形状是 300 x 150，因为您没有提供任何尺寸 <svg>对象(具有 class="sym"属性的对象)。

所以你可以

• 给出<svg>宽高比为 111.2:33 或
的元素宽度和高度
• 将 preserveAspectRatio="none"属性添加到 <symbol>元素

取决于你想展示什么