SVG 元素之间的奇数间距

Question

我使用一些基本的 javascript 和字符串连接生成了 SVG 元素：http://jsfiddle.net/8d3zqLsf/3/

这些 SVG 元素之间的间距非常小（最大 1 像素），并且彼此之间的距离在可接受的范围内。

当我复制生成的 SVG 并将其渲染为正常 DOM 的一部分而不是在页面加载时生成时，SVG 元素之间的间距很奇怪。 http://jsfiddle.net/1n73a8yr/

注意：我已验证 SVG 仅与其中的形状一样宽，因此额外的空间不是来自 SVG。

为什么 SVG 在页面加载时注入与作为 DOM 的一部分呈现时呈现不同？有没有一种方法可以解决这个问题，而无需在 svgs 上使用负像素值的左 css 属性？

HTML：

<div>
    <svg width="86.60254037844386" height="100"> <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75     -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon></svg>
    <svg width="86.60254037844386" height="100"> <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75     -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon></svg>
    <svg width="86.60254037844386" height="100"> <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75     -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon></svg>
</div>

CSS

svg {
  display:inline-block;  
  margin-left:0px;
  margin-right:0px;
  padding-left:0px;
  padding-right:0px;
}

Answer 1

问题：

一系列inline-block 元素的格式与您通常的格式相同 HTML 之间会有空格。

inline-block 是：

该元素生成一个块元素框，该框将随 周围的内容，就好像它是一个单一的内联框（表现得很多 就像被替换的元素一样）

那该怎么办？

在这种情况下，因为是 svg，您可以在 HTML 中注释空格。

svg {
    display:inline-block;
}

<svg width="86.60254037844386" height="100">
    <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg><!-- --><svg width="86.60254037844386" height="100">
    <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg><!-- --><svg width="86.60254037844386" height="100">
    <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg>

More info关于使用inline-block的空格

---

更新（2019）

现在（以及一段时间），有一种比 inline-block 元素的每个 hack 更好的方法，它使用 display: flex 作为父元素。

div {
  display: flex
}

<div>
  <svg width="86.60254037844386" height="100">
    <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
  </svg>
  <svg width="86.60254037844386" height="100">
    <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
  </svg>
  <svg width="86.60254037844386" height="100">
    <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
  </svg>
</div>

Answer 2

这不是你真正的 SVG，它是内联块元素之间的“自动”间距。

这只是在一行上设置元素的方式。您希望键入的单词之间的空格是空格吗？这些块之间的空格就像单词之间的空格一样。 REF

有很多方法可以应对这种情况。 1个方法在@dippas's answer中展示，使用html注释<!-- -->来吸收元素之间的空间。

我的偏好是将封装元素的font-size 设置为0。

svg {
  display: inline-block;
}

.container{
  font-size: 0;
}

<div class="container">

  <svg width="86.60254037844386" height="100">
    <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg>
  <svg width="86.60254037844386" height="100">
    <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg>
  <svg width="86.60254037844386" height="100">
    <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg>

</div>