为什么svg元素不尊重CSS'bottom'，'top'，'left'，'right'属性？

Question

我有时会发现根据bottom，top，left和right属性给出元素的大小很方便，而不是使用{{1 }和width。例如，这是接受的答案：

CSS 100% height with padding/margin

但是，出于某种原因，这不适用于height元素。我已尝试使用最新的稳定版Firefox和Chrome进行以下示例。 svg元素莫名其妙地想要采用300x150的大小：

Fiddle

为什么？

Answer 1

虽然规范中没有直接提及（至少在我的知识中）<svg> is considered作为replaced element（与<div>不同，这是一个未被替换的块级别元素）。

对于绝对定位的替换元素，如果top / bottom的值过度约束，则为top设置值后，{{ 1}}会被忽略。对于bottom / left属性也是如此。

  

10.3 Calculating widths and margins / 10.3.8 Absolutely positioned, replaced elements

     

  
1. 如果此时值过度约束，则忽略“left”的值（如果包含'direction'属性   block是'rtl'）或'right'（如果'direction'是'ltr'）并解决   为了那个价值。
  

  

10.6 Calculating heights and margins / 10.6.5 Absolutely positioned, replaced elements

     

  
1. 如果此时值过度约束，请忽略值   '底部'并解决这个价值。
  

因此，绝对定位的right元素将与<svg>和top偏移相对应。