html – SVG元素之间的奇数间距
我使用一些基本的
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,0 "></polygon></svg> </div> CSS svg { display:inline-block; margin-left:0px; margin-right:0px; padding-left:0px; padding-right:0px; } 解决方法
问题:
内联块是:
那么该怎么办? 在这种情况下,因为是一个svg,你可以在HTML中注释空格. More info关于使用内联块的空白空间 这是一个片段: 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,75 -7.105427357601002e-15,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,0 "></polygon> </svg> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |