Vùng chứa SVG hiển thị kích thước sai trong máy tính để bàn Safari (tốt trong Chrome/iOS)

Question

Tôi nghĩ Safari đã sắp xếp điều này nhưng nó vẫn có vẻ là một vấn đề (trừ khi tôi đang làm điều gì đó rõ ràng là sai).

Tôi có một SVG được đặt bên trong thẻ đối tượng. Đó là bọc trong một DIV linh hoạt chứa (ví dụ thiết lập là chiều rộng 50%). Ngày thay đổi kích thước, chiều cao container thay đổi kích thước trong Firefox, Chrome và Opera như tôi mong đợi nhưng trên Safari container vẫn quá cao.

Dưới đây là một ví dụ về Codepen để chứng minh, chuyển sang kết quả kích thước đầy đủ hoặc 'biên tập đứng về phía' (nút dưới cùng bên phải) để nhìn thấy hiệu quả rõ ràng trong Safari: http://codepen.io/benfrain/full/fhyrD

Bên cạnh sử dụng JS để thay đổi kích thước SVG trên tải/thay đổi kích thước, có ai biết nếu có bất cứ điều gì khác tôi có thể làm để làm cho Safari hoạt động chính xác không? Có thể thề rằng tôi đã tìm ra điều này trong một vài tuần trước nhưng bây giờ tôi dường như lại gặp vấn đề.

Answer 1

Vì vậy, Sérgio Lopez đã có câu trả lời cho điều này. Bạn có thể sử dụng tỷ lệ nội tại cho kỹ thuật video mà Thierry Koblentz mô tả ở đây: http://alistapart.com/article/creating-intrinsic-ratios-for-video. Xem thêm thông tin tại bài đăng blog: http://benfra.in/20l

Đây là cắt và dán mã bạn cần trong CSS của bạn:

thẻ xung quanh đối tượng

object { 
    width: 100%; 
    display: block; 
    height: auto; 
    position: relative; 
    padding-top: 100%; 
} 

Và điều này cho SVG bên trong:

svg { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
}