html – SVG元素之间的奇数间距

概述我使用一些基本的 javascript和字符串连接生成了SVG元素： http://jsfiddle.net/8d3zqLsf/3/ 这些SVG元件之间的间距非常小(最大1px),并且彼此之间的距离可以接受. 当我复制生成的SVG并将其渲染为普通DOM的一部分而不是在页面加载时生成时,它在SVG元素之间具有奇数间隔. http://jsfiddle.net/1n73a8yr/ 注意：我已经确认SV 我使用一些基本的 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"  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"  points="86.60254037844388,0 "></polygon></svg></div>

CSS

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

解决方法 问题：

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

内联块是：

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中注释空格.

More info关于使用内联块的空白空间

这是一个片段：

svg {    display:inline-block;}

<svg wIDth="86.60254037844386" height="100">    <polygon xmlns="http://www.w3.org/2000/svg" ID="0"  points="86.60254037844388,75 -7.105427357601002e-15,0 "></polygon></svg><!-- --><svg wIDth="86.60254037844386" height="100">    <polygon xmlns="http://www.w3.org/2000/svg" ID="0"  points="86.60254037844388,0 "></polygon></svg>

总结

以上是内存溢出为你收集整理的html – SVG元素之间的奇数间距全部内容，希望文章能够帮你解决html – SVG元素之间的奇数间距所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。