當涉及利潤率時，<svg>的寬度如何確定？

Question

這似乎是一個<svg>元素的寬度是基於集合父的大小，但忽略邊距：

這是爲什麼？我怎樣才能使<svg>的行爲像任何其他block元素，當涉及到大小？

小提琴：http://jsfiddle.net/4p3ww/

Answer 1

沒有辦法對一些SVG內容說就是了佔用任何空間後邊框，填充可用和利潤都採取自己的份額（有沒有方法來創建SVG由於「寬度」和「高度」屬性默認爲100％，因此它沒有固有的寬度/高度）。

https://wiki.mozilla.org/SVG:Sizing

好像有仍然在不同的瀏覽器應該如何呈現這些辯論，所以我要小心。即使有高度/寬度屬性和max-width CSS，它對我來說仍然很奇怪。

http://jsfiddle.net/4p3ww/3/

Answer 2

只要不使用<svg>和<img>，好像他們是塊元素。他們不是（Is <img> element block level or inline level?）。

如果你換你<svg>與contained類按您例如<div>，你會得到更符合你所期望的結果：http://jsfiddle.net/gLndw/