I contenuti SVG dovrebbero essere visibili all'esterno di uno <svg> integrato?

Question

In passato ho risposto a una domanda su "chi ha sbagliato" riguardo alle immagini SVG non "ritagliate" (overflow: hidden) in IE9, dove tutti gli altri browser di supporto lo hanno fatto. La risposta è here.

Oggi, mentre la revisione di nuovo HTML5 Boilerplate, ho notato che essi affermano di "[correct] overflow not being hidden in IE9" con questo pezzo di codice:

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

che sto cercando qualcuno per confermare o negare la mia ricerca originale puntando a qualche altro nota nelle specifiche HTML5 o SVG. Non riesco a trovare nulla, ma voglio essere sicuro che non mi manchi qualcosa.

Il meglio che posso trovare è che stanno cercando di applicare la regola 7 here, ma che dovrebbe applicarsi solo a un documento SVG, come tramite un tag img o quando caricato direttamente.

Answer 1

La specifica SVG ha questo da dire: http://www.w3.org/TR/SVG/styling.html#UAStyleSheet

sembra simile a quello di Firefox e Chrome non fanno?

Answer 2

La risposta originale mi sembra corretta, utilizzando i motivi specificati (in particolare il quinto e il settimo punto elenco di the spec).

Sembra incredibilmente improbabile che IE sia corretto e Webkit e Firefox no. Tuttavia, come sospetti, il settimo punto elenco è il fattore di differenziazione.

Se si carica this test case in Chrome e utilizzare gli strumenti per sviluppatori di ispezionare il formato SVG, si vedrà:

(user agent stylesheet)

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

Se si attiva "Mostra User Agent CSS "in Firebug vedi questa regola in Firefox:

svg.css (line 49) <System>

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

Infine, se si modifica il banco di prova per aggiungere svg { overflow:hidden } poi IE corrisponde visivamente gli altri browser.

Quindi, mi sembra che tutti e tre i browser si comportino secondo le specifiche, ma Chrome/Safari/FF hanno tutte le regole UA che corrispondono più strettamente a ciò che la maggior parte degli utenti si aspetterebbe.

Se potessi partire abbastanza bene da solo, questo è il punto in cui interrompo questa risposta.

Tuttavia, se si edit the test case to add svg { overflow:visible }, sia Chrome che Firefox non mostrano "correttamente" il contenuto in overflow. Non sono sicuro di come risolvere questo punto dati con il resto di questa risposta. :/