div内的SVG Rect定位不正确答案

【问题标题】：SVG Rect positioning inside div is incorrectdiv内的SVG Rect定位不正确
【发布时间】：2015-07-06 05:12:10
【问题描述】：

我已将 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 rect 似乎向下移动，而它仍应像以前一样底部对齐。

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

问题发生在较小的矩形上。我是否遗漏了什么或者这是 svg 渲染的问题？

【问题讨论】：

标签： html css svg position

【解决方案1】：

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

position: inherit

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

box4 的 svg 和 div 没有对齐。

border:1px solid red;

看看：

http://jsfiddle.net/2dc3waqt/

【讨论】：

你能告诉我为什么 box4 的 svg 和 div 没有对齐，尽管当我给出更大的高度并相应地更改顶部时它们对齐得很好，而不添加 css 位置继承？
SVG 不从父级继承位置。
我的意思是当高度很大时它的位置是如何按预期定位的，但当高度较小时它不是预期的。或者您能否更新我的示例以获取也有问题的较大矩形？