Svg标签水平间隙

Question

我有两个元素，我想同时显示。

http://jsfiddle.net/m7y8h7wf/

​

<div style="background-color:#000000;font-size:0;padding:10px;">
<svg version="1.1" width="50" height="1">
                            <g stroke="white" >
                                <line x1="50.5" y1=".5" x2=".5" y2=".5" stroke-width="1" shape-rendering="crispEdges"  />
                            </g>
                        </svg>
                        <svg version="1.1" width="50" height="1">
                            <g stroke="white" >
                                <line x1="0.5" y1=".5" x2="50.5" y2=".5" stroke-width="1" shape-rendering="crispEdges"  />
                            </g>
                        </svg>
</div>

​

它在firefox中看起来很不错，但在chrome中，这两个元素之间存在着明显的水平差距。

我试着去掉我能想到的所有空白/空白处，但它不想消失。

有什么想法吗？

Answer 1

如果我理解了您的问题，那么在x=0中启动第二个元素，而不是x=0.5会让事情变得更紧吗？

​

<div style="background-color:#000000;font-size:0;padding:10px;">
  <svg version="1.1" width="50" height="1">
    <g stroke="white" >
      <line x1="50.5" y1=".5" x2=".5" y2=".5" stroke-width="1" shape-rendering="crispEdges"  />
    </g>
  </svg>
  <svg version="1.1" width="50" height="1">
    <g stroke="white" >
      <line x1="0" y1=".5" x2="50.5" y2=".5" stroke-width="1" shape-rendering="crispEdges"  />
    </g>
  </svg>
</div>

​

Answer 2

让第二个svg x1值从0开始。

现在它从0.5开始，离左0.5像素。

<svg version="1.1" width="50" height="1">
    <g stroke="white">
        <line x1="0" y1=".5" x2="50.5" y2=".5" stroke-width="1" shape-rendering="crispEdges"  />
    </g>
</svg>

见更新小提琴：http://jsfiddle.net/m7y8h7wf/1/

x1 = horizontal start value of the line
x2 = horizontal end value of the line
y1 = vertical start value of the line
y2 = vertical end value of the line

您好，提摩太