为什么 SVG 会在其中添加一些空格？

Question

我对 SVG 很陌生，并尝试生成一个对象，该对象由放在一行中的几个小 svgs 组成。我在删除 svg 添加的空格时遇到问题。我希望元素能够相互接触。

我创建了一个小例子： http: //jsfiddle.net/PFWBC/1/

 <svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 65 65"  width="50" height="50">
   <path d="M10,10   l50,0  0,50  -50,0  0,-50"
      style="stroke: #000000; fill:none;" />
</svg>
 <svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 65 65"  width="50" height="50">
   <path d="M10,10   l50,0  0,50  -50,0  0,-50"
      style="stroke: #000000; fill:none;" />
</svg>

这里有两个正方形。当您检查元素“path”时，您会发现它没有添加任何额外的空间，但是 svg 标签却添加了。

我尝试以“路径”对象和“svg”之间没有额外空间的方式更改宽度/高度/viewBox，但是，没有设法做到这一点，边距/填充也没有帮助。虽然，我可以去掉右侧和底部的空白空间，但左侧和顶部仍然保留......

我发现了类似的问题，但它们大约是100%，这不是我的情况。

在此先感谢您的任何建议！

Answer 1

事实上，您绘制的路径不在 viewBox 的边缘，这使得它看起来更糟，但填充实际上是由</svg>和之间的空白引起的<svg>之间的空白引起的。

在 html 中，如果你在东西之间放置空格，它就会被渲染。如果您将空白替换为您可以看到的内容，例如

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 65 65"  width="50" height="50">
   <path d="M0,0   l65,0  0,65  -65,0  0,-65"
      style="stroke: #000000; fill:none;" />
</svg>Text<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 65 65"  width="50" height="50">
   <path d="M0,0   l65,0  0,65  -65,0  0,-65"
      style="stroke: #000000; fill:none;" />
</svg>

以及解决方案。首先不要添加空格...

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 65 65"  width="50" height="50">
   <path d="M0,0   l65,0  0,65  -65,0  0,-65"
      style="stroke: #000000; fill:none;" />
</svg><svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 65 65"  width="50" height="50">
   <path d="M0,0   l65,0  0,65  -65,0  0,-65"
      style="stroke: #000000; fill:none;" />
</svg>