SVG Rect позиционирование внутри DIV неверена

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 rect будет сдвигаться вниз, в то время как он должен быть выровнен по нижнему краю, как и раньше.

Смотрите здесь: http://jsfiddle.net/mw1skze1/3/

Проблема возникает с меньшими прямоугольниками. Я что-то упустил или это проблема с svg-рендерингом?

Answer 1

Решение: добавить позицию css наследовать к svg.

position: inherit 

Дивы хорошо выровнены. Вы можете видеть выравнивание в Fiddle, я добавил границу к divs, чтобы вы могли судить об их выравнивании.

Его svg и div для коробки4 не выровнены хорошо.

border:1px solid red; 

имеют вид:

http://jsfiddle.net/2dc3waqt/