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

Возьмите этот фрагмент 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, чтобы увидеть весь круг?

Ответ 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 пикселей.

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

Ответ 2

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