在涉及边距时，如何确定<svg>的宽度？</svg>

Question

似乎<svg>元素的宽度是根据父级的大小设置的，但忽略边距：

这是为什么？在调整大小时，如何使<svg>表现得像任何其他block元素一样？

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

Answer 1

  

某些SVG内容无法说它想占用边框之后可用的任何空间，填充和边距占用了它们的份额（没有办法创建没有固有宽度/高度的SVG 'width'和'height'属性默认为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>打包到<div>类contained，则可以获得更符合您期望的结果：http://jsfiddle.net/gLndw/