Question

我发现低（高度<16px）的SVG放在HTML中，带有奇怪的垂直偏移（跨浏览器的行为相似但不相同）。 http://plnkr.co/edit/ekdIzBtXKMh3aRHpLus5?p=preview的前两个例子证明了这种情况：

Bad-line w / offset：

<div style="height: 1px; width: 100%;">
    <svg width="100%" height="1px">
        <line x1="0" y1="0" x2="100%" y2="0" stroke="rgb(255,0,0)" stroke-width="1"/>
    </svg>
</div>

VS。良好的无线偏移（边界以下1px）：

<div style="height: 1px; width: 100%;">
    <svg width="100%" height="16px">
        <line x1="0" y1="0" x2="100%" y2="0" stroke="rgb(255,0,0)" stroke-width="1"/>
    </svg>
</div>

有人知道真实的（例如基于规格的）对此的解释吗？我希望能够正确放置1px高（线）SVG。有没有办法100％确定？

感谢任何人提示，

约翰

Answer 1

http://plnkr.co/edit/iwdXTMS66EAjJWb2vcHO?p=preview 修正了......;）

svg{display:block;}

去除内联元素的默认边距

html中svg的最小高度

1 个答案: