div 内的 SVG Rect 定位不正确

Question

我已将 SVG 矩形放入 div:

    <div id="box1">
        <svg xmlns="http://www.w3.org/2000/svg" width="102px" height="171px">
            <rect width="102px" height="171px" style="fill:#00ACEC; fill-opacity:1;"/>
        </svg>
    </div>
    <div id="box2">
        <svg xmlns="http://www.w3.org/2000/svg" width="162px" height="14px">
            <rect width="162px" height="14px" style="fill:#BEBEBE; fill-opacity:1;"/>
    </div>

两个矩形在底部正确对齐。

但是，如果我将高度降低 2px 并相应地更新顶部，则 svg 矩形会向下移动，但它仍应像以前一样底部对齐。

看这里：http://jsfiddle.net/mw1skze1/3/

较小的矩形会出现此问题。我是不是遗漏了什么或者这是 svg 渲染的问题？

Answer 1

解决方法：添加 css position inherit 到 svg.

position: inherit

div 对齐得很好。你可以看到 Fiddle 中的对齐方式我在 div 中添加了边框，以便你可以判断它们的对齐方式。

box4 的 svg 和 div 没有对齐。

border:1px solid red;

看看：

http://jsfiddle.net/2dc3waqt/

div 内的 SVG Rect 定位不正确

SVG Rect positioning inside div is incorrect

html

css

svg

position