Nội dung SVG có thể hiển thị bên ngoài một số <svg> được nhúng theo mặc định không?

Question

Trong quá khứ, tôi đã trả lời câu hỏi về "người đã sai" liên quan đến hình ảnh SVG không bị "cắt" (overflow: hidden) trong IE9, nơi tất cả các trình duyệt hỗ trợ khác đã làm như vậy. Câu trả lời là here.

Hôm nay, khi xem xét HTML5 Boilerplate một lần nữa, tôi nhận thấy rằng họ tuyên bố họ "[correct] overflow not being hidden in IE9" với chút mã này:

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

Tôi đang tìm một ai đó để xác nhận hoặc phủ nhận nghiên cứu ban đầu của tôi bằng cách trỏ đến một số khác lưu ý trong thông số kỹ thuật HTML5 hoặc SVG. Tôi không thể tìm thấy bất cứ điều gì, nhưng tôi muốn chắc chắn rằng tôi không thiếu một cái gì đó. Điều tốt nhất tôi có thể tìm thấy là họ đang cố gắng áp dụng quy tắc 7 here, nhưng điều đó chỉ nên áp dụng cho Tài liệu SVG, như thông qua thẻ img hoặc khi được tải trực tiếp.

Answer 1

Đặc tả SVG có này để nói: http://www.w3.org/TR/SVG/styling.html#UAStyleSheet

Có vẻ giống như những gì Firefox và Chrome làm không?

Answer 2

Câu trả lời ban đầu của bạn có vẻ phù hợp với tôi, sử dụng căn cứ bạn đã chỉ định (cụ thể là các điểm bullet thứ năm và thứ bảy là the spec).

Có vẻ như IE không chính xác và Webkit và Firefox thì không. Tuy nhiên, khi bạn nghi ngờ điểm bullet thứ bảy là yếu tố khác biệt.

Nếu bạn tải this test case trong Chrome và sử dụng các công cụ phát triển để kiểm tra việc SVG, bạn sẽ thấy:

(user agent stylesheet)

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

Nếu bạn kích hoạt "Show User Agent CSS "trong Firebug bạn thấy quy tắc này trong Firefox:

svg.css (line 49) <System>

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

Cuối cùng, nếu bạn chỉnh sửa các trường hợp thử nghiệm để thêm svg { overflow:hidden } sau đó IE trực quan phù hợp với các trình duyệt khác. Vì vậy, có vẻ như với tôi rằng cả ba trình duyệt đều hoạt động theo thông số kỹ thuật, nhưng Chrome/Safari/FF đều có các quy tắc UA phù hợp hơn với hầu hết những gì người dùng mong đợi.

Nếu tôi có thể tự túc đủ, đây là nơi tôi sẽ dừng câu trả lời này.

Tuy nhiên, nếu bạn edit the test case to add svg { overflow:visible }, cả Chrome và Firefox không 'đúng' sẽ hiển thị nội dung bị tràn. Tôi không chắc chắn làm thế nào để giải quyết điểm dữ liệu này với phần còn lại của câu trả lời này. :/