Должно ли содержимое SVG быть видимым вне встроенного <svg> по умолчанию?

Question

В прошлом я ответил на вопрос «кто был неправ» в отношении изображений SVG, которые не были «обрезаны» (overflow: hidden) в IE9, где все остальные поддерживающие браузеры сделали это. Ответ here.

Сегодня, во время просмотра HTML5 Шаблонных снова, я заметил, что они утверждают, что они "[correct] overflow not being hidden in IE9" с этим битом кода:

svg:not(:root) { overflow: hidden; } 

Я ищу кого-то, чтобы подтвердить или опровергнуть мое первоначальное исследование, указывая на какой-либо другой обратите внимание на спецификации HTML5 или SVG. Я ничего не могу найти, но я хочу быть уверенным, что чего-то не упускаю.

Лучшее, что я могу найти, это то, что они пытаются применить правило 7 here, но это должно применяться только к SVG-документу, например, через тег img или при загрузке напрямую.

Answer 1

Спецификация SVG это сказать: http://www.w3.org/TR/SVG/styling.html#UAStyleSheet

Кажется похоже на то, что Firefox и Chrome сделать нет?

Answer 2

Ваш оригинальный ответ кажется мне правдивым, используя указанные вами основания (в частности, пятую и седьмую пулевые точки the spec).

Кажется невероятно маловероятным, что IE правильный, а Webkit и Firefox - нет. Однако, как вы подозреваете, седьмая точка пули равна дифференцирующий фактор.

При загрузке this test case в Chrome и использовать инструменты для разработчиков, чтобы проверить SVG, вы увидите:

(user agent stylesheet)

svg:not(:root), symbol, image, marker, pattern, foreignObject { 
    overflow: hidden; 
} 

Если включить «Show User Agent CSS "в Firebug вы видите это правило в Firefox:

svg.css (line 49) <System>

svg:not(:root), symbol, image, marker, pattern, foreignObject { 
    overflow: hidden; 
} 

Наконец, если вы измените тестовый случай, чтобы добавить svg { overflow:hidden } затем IE визуально совпадает с другими браузерами.

Таким образом, мне показалось, что все три браузера ведут себя согласно спецификации, но у Chrome/Safari/FF есть правила UA, которые более точно соответствуют ожиданиям большинства пользователей.

Если бы я мог оставить достаточно-достаточно один, я бы остановил этот ответ.

Однако, если вы используете edit the test case to add svg { overflow:visible }, то Chrome и Firefox не отображают переполненное содержимое. Я не уверен, как решить эту точку данных с остальной частью этого ответа. :/