기본적으로 포함 된 외부 SVG 내용을 <svg>에 표시해야합니까?

Question

이전에는 IE9에서 SVG 이미지가 "자르지"않은 (overflow: hidden) 다른 모든 지원 브라우저에서 "틀린 사람"에 대한 질문에 대답했습니다. 대답은 here입니다.

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

내가 확인하거나 다른 가리켜 나의 독창적 인 연구를 거부하는 사람을 찾고 있어요 : 다시 HTML5 상용구를 검토하는 동안

오늘, 나는 그들이 코드의이 비트와 함께 그들에게 "[correct] overflow not being hidden in IE9"을 주장 것으로 나타났습니다 HTML5 또는 SVG 사양에 유의하십시오. 나는 아무것도 찾을 수 없지만 나는 뭔가를 놓치고 있지 않다는 것을 확실히하고 싶다.

내가 찾을 수있는 최선의 방법은 규칙 7 here을 적용하려고하지만, 이는 img 태그 또는 직접로드 할 때와 같이 SVG 문서에만 적용되어야한다는 것입니다.

Answer 1

SVG 사양이 말을 가지고 http://www.w3.org/TR/SVG/styling.html#UAStyleSheet

가 파이어 폭스와 크롬은 더 할 것과 비슷한 것 같은데?

Answer 2

귀하가 지정한 근거 (구체적으로는 다섯 번째 및 일곱 번째 글 머리 기호 the spec)를 사용하여 원래 답변이 나에게 들리는 것으로 보입니다.

IE가 정확하고 Webkit과 Firefox가 맞지 않을 것 같습니다. 그러나 일곱 번째 글 머리 기호 은 인 것으로 의심됩니다. 당신은 크롬에서 this test case을로드하고 SVG를 검사하는 개발자 도구를 사용하는 경우

, 당신은 볼 수 있습니다 :

(user agent stylesheet)

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

는 "연락처보기 사용자 에이전트 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 모두 오버플로 된 콘텐츠를 제대로 표시하지 못합니다. 이 답변의 나머지 부분과 함께이 데이터 포인트를 해결하는 방법을 모르겠습니다. :/