svg - 为什么 SVG 在其中增加了一些空间？

Question

我对 SVG 很陌生，并试图生成一个对象，该对象将由放在一行中的几个小 svg 组成。
我在摆脱 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>