Question

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

这些SVG元素之间的间距非常小（最大1px），并且彼此之间的距离可以接受。

当我复制生成的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中注释空格。

More info 关于使用inline-block

的空格

这是一个片段：

＆＃13;

svg {
    display:inline-block;
}

＆＃13;

<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>

＆＃13;

Answer 2

这不是你真正的SVG，它的自动＆＃39;内联块元素之间的间距。

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

有很多方法可以反击这种行为。 @ dippas的答案中显示了1种方法，使用html注释来吸收元素之间的空间。

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

＆＃13;

svg {
  display: inline-block;
}

.container{
  font-size: 0;
}

＆＃13;

<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>

＆＃13;

SVG元素之间的奇数间距

2 个答案:

那该怎么办？