svg 和路径之间的小空间答案

【问题标题】：Small space between svg and pathsvg 和路径之间的小空间
【发布时间】：2020-01-30 08:03:17
【问题描述】：

这是我的路径标签大小（g 标签大小相同）

这是我的 SVG 标签大小

它们之间有空格

这些是内联属性...

<svg preserveAspectRatio="none" class="JDicon JDicon__svg JDicon--white JDicon--large" alignment-baseline="central" version="1.1" data-tip="false" viewBox="0 0 64 64">
<g>
<path d="M56.562,6.875 L3.437,6.875 C1.539,6.875 -0.000,5.336 -0.000,3.437 C-0.000,1.539 1.539,-0.000 3.437,-0.000 L56.562,-0.000 C58.461,-0.000 60.000,1.539 60.000,3.437 C60.000,5.336 58.461,6.875 56.562,6.875 ZM3.437,24.062 L32.656,24.062 C34.555,24.062 36.094,25.601 36.094,27.500 C36.094,29.398 34.555,30.937 32.656,30.937 L3.437,30.937 C1.539,30.937 -0.000,29.398 -0.000,27.500 C-0.000,25.601 1.539,24.062 3.437,24.062 ZM43.437,30.937 C41.539,30.937 40.000,29.398 40.000,27.500 C40.000,25.601 41.539,24.062 43.437,24.062 L43.562,24.062 C45.461,24.062 47.000,25.601 47.000,27.500 C47.000,29.398 45.461,30.937 43.562,30.937 L43.437,30.937 ZM3.437,47.125 L56.562,47.125 C58.461,47.125 60.000,48.664 60.000,50.562 C60.000,52.461 58.461,54.000 56.562,54.000 L3.437,54.000 C1.539,54.000 -0.000,52.461 -0.000,50.562 C-0.000,48.664 1.539,47.125 3.437,47.125 Z">
</path>
</g>
</svg>

这是 svg 的 css

{
    width: 1.8rem;
    height: 1.8rem;
}

我试图弄清楚为什么这个空间存在。

https://codepen.io/colton123/pen/qBEGwLL

【问题讨论】：

请张贴代码而不是简单的图片
@RamRaider Ops.. 抱歉我编辑了它
你的 viewBox 是 64 x 64，你的路径比那个小。
@Robert Longson 嗯...我可以让它适合 viewBox 吗？
最简单的只是改变 viewBox，不是吗？

标签： html css svg

【解决方案1】：

两件事：你的图标不是一个完美的正方形，右侧的图标本身有一个间隙。

首先，<svg> 设置为 1.8rem（CodePen 中为 32px），<g> 为 30x27px。如果您将 <svg> 的高度和宽度更改为 3rem（CodePen 中为 48px），<g> 将是 45x40.5px。由于您将<svg> 强制为正方形，因此会有间隙。

其次，<g> 的宽度应该与<svg> 的宽度匹配，但始终是宽度的 93.75%。 这意味着图标本身有 6.25% 的差距。

【讨论】：

【解决方案2】：

您好，请查看此内容并解决您的 SVG 问题。谢谢

svg {
  width: 2rem;
  height: auto;
}

&lt;svg class="JDicon JDicon__svg JDicon--white JDicon--large" alignment-baseline="central" version="1.1" data-tip="false" viewBox="0 0 62 56"&gt;&lt;g&gt;&lt;path d="M56.562,6.875 L3.437,6.875 C1.539,6.875 -0.000,5.336 -0.000,3.437 C-0.000,1.539 1.539,-0.000 3.437,-0.000 L56.562,-0.000 C58.461,-0.000 60.000,1.539 60.000,3.437 C60.000,5.336 58.461,6.875 56.562,6.875 ZM3.437,24.062 L32.656,24.062 C34.555,24.062 36.094,25.601 36.094,27.500 C36.094,29.398 34.555,30.937 32.656,30.937 L3.437,30.937 C1.539,30.937 -0.000,29.398 -0.000,27.500 C-0.000,25.601 1.539,24.062 3.437,24.062 ZM43.437,30.937 C41.539,30.937 40.000,29.398 40.000,27.500 C40.000,25.601 41.539,24.062 43.437,24.062 L43.562,24.062 C45.461,24.062 47.000,25.601 47.000,27.500 C47.000,29.398 45.461,30.937 43.562,30.937 L43.437,30.937 ZM3.437,47.125 L56.562,47.125 C58.461,47.125 60.000,48.664 60.000,50.562 C60.000,52.461 58.461,54.000 56.562,54.000 L3.437,54.000 C1.539,54.000 -0.000,52.461 -0.000,50.562 C-0.000,48.664 1.539,47.125 3.437,47.125 Z"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;

你应该是 viewBox="0 0 62 54" 而不是 viewBox="0 0 62 62"

【讨论】：