SVG trình duyệt chéo trong bố cục đáp ứng hoặc linh hoạt?

Question

Tôi đã chọn sử dụng thư viện javascript Raphaël để hỗ trợ trình duyệt mở rộng, nhưng tôi gặp sự cố khi tải SVG để hiển thị chính xác trong mọi trình duyệt, ngoại trừ Chrome và Firefox. Tôi đã gãi đầu của tôi về điều này trong một thời bây giờ và rất thích nghe làm thế nào tôi có thể làm cho SVG làm việc trong một bố trí đáp ứng.

Chrome và Firefox hiển thị SVG chính xác như tôi muốn. Nó cân bằng tỉ lệ, duy trì tỷ lệ khung hình chính xác và tỷ lệ phần trăm của bố mẹ được cho chiều rộng.

Internet Explorer duy trì tỷ lệ khung hình chính xác nhưng không đúng tỷ lệ với cha mẹ.

Safari chia tỷ lệ chính xác với chiều rộng của bố mẹ, nhưng không cao. Chiều cao, liên quan đến vùng chứa mẹ, bằng cách nào đó được đặt thành 100%.

Javascript

var menu = Raphael('menu', '100%', '100%'); 

menu.setViewBox('0', '0', '50', '50', true); 

var menu_bg = menu.rect(0,0, 50, 50); 
    menu_bg.attr({ 
     id : 'menu_bg', 
     'stroke-width' : '0', 
     'fill' : '#000' 
    }); 

CSS

* { 
    margin: 0; 
    padding: 0; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
html, body { 
    height: 100%; 
} 
#menu { 
    width: 50%; 
    background: #60F; 
    padding: 2.5%; 
} 
#menu svg { 
    display: block; 
    width: 100%; 
    height: 100%; 
    max-height: 100%; 
} 
#text { 
    width: 50%; 
    background: #309; 
    padding: 2.5%; 
    color: #FFF; 
} 

HTML

<div id="menu"></div> 

<div id="text"> 
Filler text 
</div> 

Sống Ví dụ có thể được xem tại

• http://jsfiddle.net/R8Qv3/

Answer 1

Bạn có thể thêm các thuộc tính vào thẻ SVG của bạn - <svg viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> để duy trì tỷ lệ khía cạnh.

Taken từ bài báo tôi đọc rằng trong ...

Để giữ nguyên tỷ lệ khía cạnh của phần tử chứa và đảm bảo rằng là quy mô thống nhất, chúng tôi bao gồm các viewbox và preserveAspectRatio thuộc tính.

Giá trị của thuộc tính chế độ xem là danh sách bốn không gian- hoặc số được phân tách bằng dấu phẩy: min-x, min-y, chiều rộng và chiều cao. Bằng cách xác định chiều rộng và chiều cao của chế độ xem của chúng tôi, chúng tôi xác định tỷ lệ co của hình ảnh SVG . Các giá trị chúng tôi đặt cho thuộc tính preserveAspectRatio - 300 × 329 - bảo toàn tỷ lệ cỡ ảnh được xác định trong hộp xem.

Từ this article.