SVG元素之间的奇数间距

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

这些SVG元件之间的间距非常小(最大1px),并且彼此之间的距离可以接受.

当我复制生成的SVG并将其渲染为普通DOM的一部分而不是在页面加载时生成时,它在SVG元素之间具有奇数间隔.http://jsfiddle.net/1n73a8yr/

注意:我已经确认SVG的宽度与其中的形状一样宽,因此额外的空间不是来自SVG.

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

HTML:

CSS

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

dippas.. 9

问题:

inline-block像您通常格式化HTML格式的一系列元素将在它们之间有空格.

inline-block 是:

该元素生成一个块元素框,该框元素框将与周围的内容一起流动,就好像它是一个单独的内联框(行为很像被替换的元素)

那么该怎么办？

在这种情况下,因为svg你可以在HTML中注释空格.

有关空格的更多信息inline-block

这是一个片段:

svg {
    display:inline-block;
}

svg {
    display:inline-block;
}

svg {
  display: inline-block;
}

.container{
  font-size: 0;
}