Почему Firefox обрезает встроенные SVG?

Question

Возьмите этот фрагмент SVG, встроенный непосредственно в тело XHTML, который подается с DTD XHTML 1.0 Strict

<svg>
    <circle cx="150" cy="150" r="150"/>
</svg>

Посмотрите этот пример на http://jsfiddle.net/3NXbL с помощью Chrome (я использую 11.0.696.57) Виден целый круг.

Просмотр того же jsfiddle с помощью Firefox (я использую 4.0.1).Тот же круг виден, но разрезан пополам по вертикали.

(Обратите внимание, что я видел точно такое же поведение в других версиях Firefox, разных типах документов и разных методах включения содержимого SVG, но это обрезаетсявплоть до очень простого примера для jsfiddle)

Каковы правила Firefox для выделения измерений для содержимого SVG на веб-страницах?Есть ли простые способы привести их в соответствие с другими браузерами?Как бы вы изменили мой пример jsfiddle, чтобы увидеть весь круг?

Answer 1

1) Наибольшее <svg> по умолчанию overflow:hidden в спецификации SVG.

2) Размер самого внешнего <svg> определяется как размер любого другого замененного элемента CSS для http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width и http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height и для вашего случая (не указана внутренняя высота, ширина и высота) как 100%, но содержащий блок, предположительно имеет автоматическую высоту), что дает высоту 150 пикселей.

Хрон, похоже, просто здесь глючит: он использует область просмотра вместо фактического содержащего блока в качестве процентной базы для высоты <svg>.

Answer 2

Вы должны указать width и height для элемента <svg>. Firefox по умолчанию имеет произвольную высоту, если это не указано, что приводит к отсечению области просмотра.