¿Debería el contenido SVG estar visible fuera de un <svg> incrustado de forma predeterminada?

Question

En el pasado respondí una pregunta sobre "quién estaba equivocado" con respecto a las imágenes SVG que no están "recortadas" (overflow: hidden) en IE9, donde todos los demás navegadores compatibles lo hicieron. La respuesta es here.

Hoy en día, mientras se revisan para HTML 5 otra vez, me di cuenta de que ellos dicen que "[correct] overflow not being hidden in IE9" con este trozo de código:

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

estoy buscando a alguien para confirmar o negar mi investigación original apuntando a algún otro nota en las especificaciones de HTML5 o SVG. No puedo encontrar nada, pero quiero asegurarme de que no me falta algo.

Lo mejor que puedo encontrar es que están tratando de aplicar la regla 7 here, pero eso solo debería aplicarse a un documento SVG, como a través de una etiqueta img o cuando se carga directamente.

Answer 1

La especificación SVG tiene esto que decir: http://www.w3.org/TR/SVG/styling.html#UAStyleSheet

parece similar a lo que Firefox y Chrome no hacen?

Answer 2

La respuesta original me parece correcta, usando los motivos que especificó (específicamente los puntos quinto y séptimo de the spec).

Parece increíblemente poco probable que IE sea correcto y Webkit y Firefox no lo sean. Sin embargo, como sospecha que el séptimo punto es el factor diferenciador.

Si carga this test case en Chrome y utilizar las herramientas de desarrollo para inspeccionar el SVG, verá:

(user agent stylesheet)

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

Si habilita "Mostrar User Agent CSS "en Firebug puedes ver esta regla en Firefox:

svg.css (line 49) <System>

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

Por último, si edita el caso de prueba para añadir a continuación svg { overflow:hidden } IE partidos visualmente los otros navegadores.

Por lo tanto, me parece que los tres navegadores se comportan de acuerdo con la especificación, pero Chrome/Safari/FF todos tienen reglas de UA que coinciden más con lo que la mayoría de los usuarios esperaban.

Si pudiera irme lo suficientemente bien solo, aquí es donde detendría esta respuesta.

Sin embargo, si tiene edit the test case to add svg { overflow:visible }, tanto Chrome como Firefox no muestran "correctamente" el contenido desbordado. No estoy seguro de cómo resolver este punto de datos con el resto de esta respuesta. :/