SVG 元素之间的奇数间距

Question

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

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

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

注意：我已验证 SVG 的宽度与其内部的形状一样宽，因此额外的 space 并非来自 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

问题：

a series of inline-block elements formatted like you normally format HTML will have spaces in between them.

inline-block 是：

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

那怎么办？

在这种情况下，因为是 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，它是行内块元素之间的 'automatic' 间距。

It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. REF

有很多方法可以解决这个问题。中显示了一种方法，使用 html 注释  吸收元素之间的 space。

我的偏好是将封装元素的 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>

SVG 元素之间的奇数间距

Odd spacing between SVG elements

css

html

svg

那怎么办？

更新（2019）