Question

我已将SVG rects放在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>

两个rects在底部正确对齐。

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

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

较小的rects会出现问题。我错过了什么或这是svg渲染的问题吗？

Answer 1

解决方案：将css位置继承添加到svg。

position: inherit

div是完全一致的。您可以看到小提琴中的对齐方式我已经为div添加了边框，以便您可以判断它们的对齐方式。

box4的svg和div未对齐。

border:1px solid red;

看看：

http://jsfiddle.net/2dc3waqt/

div内的SVG Rect定位不正确

1 个答案: