HTML 按钮元素 - 内部的 svg 图像 - 奇怪的间隙和定位

Question

我有以下 HTML:

<button class="button">
  <img src="img/menu-2.svg">
</button>

还有这个 CSS:

.button {
    padding: 0;
    height: 44px;
    border: none;
    background: none;
}

当我用 Firebug 检查按钮时，我可以看到图像和按钮边框之间仍然存在某种奇怪的间隙。无论如何要删除这个？我希望图像尽可能地填满按钮，或者至少居中。

这是一个截图:

或者它可能与 SVG 文件有关？这是应该影响定位的 SVG 代码:

x="0px" y="0px" width="44px" height="44px" viewBox="0 0 44 44" enable-background="new 0 0 16 16"

令我印象深刻的是 enable-background，但我不知道它做了什么，删除它也没有任何作用。

Answer 1

保存 svg 时，您需要确保您的作品包含整个 Canvas 板，以便最终图像中没有空白。

http://healthbenefitsohio.com/images/svg_whitespace.jpg

根据上图，顶部、左侧和底部会有额外的间距，这会导致一些尴尬的间距。

http://healthbenefitsohio.com/images/svg_nospace.jpg

上图显示了保存 svg 的正确方法，并防止在将图像用于网络时出现不必要的间距。

我很高兴能帮上忙，祝你的设计伙伴好运!