![SVGs]( "SVGs")
本文介绍了SVG元素之间的奇数间距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用一些基本的javascript和字符串连接生成了SVG元素：
这些SVG元素之间的间距非常小（最大为1px），彼此之间的距离是可以接受的。
当我复制生成的SVG并将其作为正常DOM的一部分，而不是在页面加载时生成，它在SVG元素之间有奇数间距。
注意：我已经验证SVG只与其内的形状一样宽，所以额外的空间不是来自SVG。
为什么SVGs呈现不同当他们被注入到页面加载vs当它们作为DOM的一部分呈现时？有没有办法解决这个问题，而不诉诸svgs上的一个左css属性负像素值？
HTML： p>
< div>
< svg width =86.60254037844386height =100> < polygon xmlns =http://www.w3.org/2000/svgid =0style =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.60254037844386height =100> < polygon xmlns =http://www.w3.org/2000/svgid =0style =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.60254037844386height =100> < polygon xmlns =http://www.w3.org/2000/svgid =0style =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;
}
解决方案
>
inline-block 是：
那么该怎么办？
在这种情况下，由于是 svg ，您可以注释HTML中的空格。
关于使用 inline-block
以下是一个代码段：
div class =snippetdata-lang =jsdata-hide =false>
svg {display：inline-block;}
< svg width =86.60254037844386height =100> < polygon xmlns =http://www.w3.org/2000/svgid =0style =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.60254037844386height =100> < polygon xmlns =http://www.w3.org/2000/svgid =0style =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.60254037844386height =100> < polygon xmlns =http://www.w3.org/2000/svgid =0style =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> / pre>
I have generated SVG elements using some basic javascript and string concatenation: http://jsfiddle.net/8d3zqLsf/3/
These SVG elements have very little spacing between them (1px max) and are within an acceptable distance from each other.
When I copy the generated SVG and render it as part of the normal DOM and not generated on page load, it has odd spacing between the SVG elements. http://jsfiddle.net/1n73a8yr/
Note: I have verified that the SVG is only as wide as the shape within it, so the additional space is not coming from the SVG.
Why do SVGs render differently when they are injected on page load vs when they are rendered as part of the DOM? Is there a way to solve this problem without resorting to a left css attribute on the svgs with a negative pixel value?
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;
}
解决方案
The Issue:
inline-block is:
So what to do?
in this case since is a svg you can comment the empty spaces in HTML.
More info about empty spaces using inline-block
Here is a snippet:
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>
这篇关于SVG元素之间的奇数间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！