內格SVG矩形的定位是不正確

我已經把SVG rects內格：內格SVG矩形的定位是不正確

<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會向下移動，而它應該仍像以前一樣向下對齊。

在這裏看到：用較小rects發生http://jsfiddle.net/mw1skze1/3/

的問題。我錯過了什麼，或者這是svg渲染的問題？

來源

2015-07-06 Nitesh

解決方案：將CSS位置繼承添加到svg。

position: inherit

該div很好地對齊。您可以在小提琴中看到對齊方式，我已經爲div添加了邊框，以便您可以判斷它們的對齊方式。

它的盒子svg和div不能很好地對齊。

border:1px solid red;

看看：

http://jsfiddle.net/2dc3waqt/

來源

2015-07-06 08:50:05 chillvivek

這裏是你的解決方案：[鏈接]（http://jsfiddle.net/61rp6whj/） – chillvivek

能否請你告訴我，爲什麼SVG和DIV對於box4不對齊，雖然他們對齊，當我給較大的高度，並相應地更改頂部，而不添加CSS位置繼承？ – Nitesh

SVG不從父代繼承位置。 – chillvivek

內格SVG矩形的定位是不正確

回答

相關問題