html – 为什么svg元素不尊重CSS’bottom’,’top’,’left’,’right’属性？

概述我有时会发现根据底部,顶部,左侧和右侧属性给出元素的大小很方便,而不是使用宽度和高度.例如,这是接受的答案： CSS 100% height with padding/margin 但是,由于某种原因,这不适用于svg元素.我已尝试使用最新的稳定版Firefox和Chrome进行以下示例. svg元素莫名其妙地想要采用300×150的大小： Fiddle 为什么？ 虽然在规范中没有直接提及(至少在 我有时会发现根据底部,顶部,左侧和右侧属性给出元素的大小很方便,而不是使用宽度和高度.例如,这是接受的答案：

CSS 100% height with padding/margin

但是,由于某种原因,这不适用于svg元素.我已尝试使用最新的稳定版firefox和Chrome进行以下示例. svg元素莫名其妙地想要采用300×150的大小：

Fiddle

为什么？

解决方法 虽然在规范中没有直接提及(至少在我的知识中)< svg> is considered作为 replaced element(与< div>不同,它是未替换的块级元素).

对于绝对定位的替换元素,如果顶部/底部的值过度约束,则一旦为顶部设置值,底部将被忽略.对于左/右属性也是如此.

07002 / 07003

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.

07004 / 07005

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

因此绝对定位< svg>元素将是关于顶部和左侧偏移的位置.

总结

以上是内存溢出为你收集整理的html – 为什么svg元素不尊重CSS’bottom’,’top’,’left’,’right’属性？全部内容，希望文章能够帮你解决html – 为什么svg元素不尊重CSS’bottom’,’top’,’left’,’right’属性？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。