html - Svg Tag Horizontal Gap -
i have 2 elements display side side.
<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>
it looks pretty in firefox, in chrome there's noticeable horizontal gap between 2 elements.
i've tried removing padding/margins can think of doesn't want go away.
any ideas?
if i'm understanding problem, wouldn't starting second element @ x=0
rather x=0.5
tighten things up?
<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>
Comments
Post a Comment