Question

我想要并排显示两个元素。

<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个像素开始。

<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

问候timotheus

Svg标签水平差距

2 个答案: