Я действительно пытался изучить SVG. Но браузеры, похоже, попали в нужное русло.
Взять следующий HTML:
<html>
<head></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/>
</svg>
<p>Hello? Hellooooooooooooo?</p>
</body>
</html>
Просмотрите это в любом современном браузере, и вы увидите произвольное количество пробелов между прямоугольником и следующим абзацем HTML. (IE9 ничего не отображает, но никто не удивится.)
Firefox (Firebug) не дает высоту ни svg, ни rect элементов. Он просто слабак и говорит «авто».
Опера говорит, что svg имеет высоту 150px и говорит 'auto' для rect.
Хром укомплектовывает и дает высоты для обоих. 102px для rect (очевидно, включая удар) и 428px для svg.
Я ожидаю, что элемент svg будет «тонким» контейнером (т.е. ничего не добавит к размерам его содержимого) и, следовательно, будет иметь высоту 102px.
Кто-нибудь знает, каким должно быть правильное поведение и как мне это исправить?