内联SVG精灵空白间隙问题

Question

内联SVG精灵空白间隙问题

3

在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

我该如何去掉这个空白间隔？

有什么想法吗？

谢谢。

- magicspon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

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

因此，您可以：

将该 <svg> 元素的高度和宽度设置为长宽比为 111.2:33；或
向 <symbol> 元素添加 preserveAspectRatio="none" 属性

具体取决于您想要显示的内容。