html - 为什么 svg 元素不遵守 CSS 'bottom'、 'top'、 'left'、 'right' 属性？

Question

我有时发现根据 bottom、top、left 和 right 给出元素的大小很方便 属性，而不是使用 width 和 height。例如，这是此处接受的答案:

CSS 100% height with padding/margin

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

Fiddle

为什么？

Answer 1

虽然规范中没有直接提及(至少在我看来是这样)<svg> is considered作为replaced element (与 <div> 不同，它是一个不可替换的 block 级元素)。

对于绝对定位的替换元素，如果 top 的值/bottom一旦您为 top 设置值，就会受到过度约束, bottom会被忽略。这适用于 left/right属性也是如此。

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

6. If at this point the values are over-constrained, ignore the value for either 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

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

6. If at this point the values are over-constrained, ignore the value for 'bottom' and solve for that value.

因此绝对定位 <svg>元素将相对于 top 定位和 left偏移量。