Question

我对SVG很新，并且尝试生成一个对象，该对象将由一行中的几个小svgs组成。我有一个问题摆脱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>
 <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>

这里有两个方格。当你检查元素的路径＆＃39;你会看到它没有添加任何额外的空间，但是，svg标签可以。

我试图改变宽度/高度/ viewBox，使得“路径”之间没有额外的空间。但是，对象和＆＃39; svg＆＃39;然而，没有设法做到这一点，marging / padding也没有帮助。虽然，我可以摆脱右侧和底侧的空白空间，但左侧和顶侧仍然存在......

我发现了类似的问题，但它们大约是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>

Answer 2

xml：space用于处理仅空白文本节点。空格来自空白字符，例如制表符，换行符或回车符，它们位于标记之间以提供格式。删除＆＃34;保留＆＃34;相当于将其更改为＆＃34;默认＆＃34;，它根据XML处理器折叠或替换空白字符。有一个相关的问题，有更详细的解释。

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

2 个答案: