Cách tạo phần tử <svg> mở rộng hoặc hợp đồng với vùng chứa chính?

Question

Mục tiêu là để phần tử <svg> mở rộng đến kích thước của vùng chứa chính, trong trường hợp này là <div>, bất kể thùng chứa lớn hay nhỏ có thể như thế nào.

Mã:

<style> 
    svg, #container{ 
     height: 100%; 
     width: 100%; 
    } 
</style> 

<div id="container"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > 
     <rect x="0" y="0" width="100" height="100" /> 
    </svg> 
</div> 

Các giải pháp phổ biến nhất cho vấn đề này dường như được thiết lập viewBox thuộc tính trên các yếu tố <svg>.

viewBox="0 0 widthOfContainer heightOfContainer" 

Tuy nhiên, điều này dường như không làm việc trong trường hợp các yếu tố bên trong phần tử <svg> có độ rộng được xác định trước và/hoặc chiều cao. Ví dụ: phần tử <rect>, trong mã ở trên, có chiều rộng và chiều cao được đặt rõ ràng.

Vì vậy, giải pháp hiển nhiên là sử dụng độ rộng% và% chiều cao trên các yếu tố đó. Nhưng điều này thậm chí phải được thực hiện? Đặc biệt, kể từ khi <img src=test.svg > hoạt động tốt và mở rộng/hợp đồng mà không có bất kỳ vấn đề nào với độ cao và chiều rộng được đặt rõ ràng <rect> chiều cao và chiều rộng.

Nếu các thành phần như <rect> và các yếu tố khác như vậy, phải có chiều rộng và chiều cao được xác định theo tỷ lệ phần trăm, có cách nào đó trong Inkscape hay không để tất cả các phần tử có chiều rộng phần trăm sử dụng tài liệu <svg>. .. thay vì kích thước cố định?

Answer 1

viewBox không phải là chiều cao của vùng chứa, đó là kích thước bản vẽ của bạn. Xác định viewBox của bạn để có 100 đơn vị chiều rộng, sau đó xác định rect của bạn thành 10 đơn vị. Sau đó, tuy nhiên bạn có quy mô lớn SVG, rect sẽ là 10% chiều rộng của hình ảnh.

Answer 2

@robertc có quyền, nhưng bạn cũng cần lưu ý rằng svg, #container làm cho svg được thu nhỏ theo cấp số nhân cho bất kỳ điều gì trừ 100% (một lần cho #container và một lần cho svg).

Nói cách khác, nếu tôi áp dụng 50% h/w cho cả hai phần tử, nó thực sự là 50% 50% hoặc .5 * .5, tương đương với 25 hoặc 25%.

Một bộ chọn hoạt động tốt khi được sử dụng như @robertc đề xuất.

svg { 
    width:50%; 
    height:50%; 
} 

Answer 3

Đối với iphone của bạn Bạn có thể sử dụng trong balise đầu của bạn:

"width=device-width" 

Answer 4

gì làm việc cho tôi thời gian gần đây là để loại bỏ tất cả height="" và width="" thuộc tính từ <svg> thẻ và tất cả các thẻ con. Sau đó, bạn có thể sử dụng tỷ lệ bằng cách sử dụng phần trăm chiều cao hoặc chiều rộng của vùng chứa chính.

Answer 5

Giả sử tôi có một SVG mà trông như thế này:

Và tôi muốn đặt nó trong một div và làm cho nó lấp đầy div cách đáp ứng. Cách làm của tôi là như sau:

Trước tiên, tôi mở tệp SVG trong một ứng dụng như inkscape. Trong File-> Document Properties Tôi thiết lập chiều rộng của tài liệu là 800px và chiều cao là 600px (bạn có thể chọn các kích thước khác). Sau đó, tôi phù hợp với SVG vào tài liệu này.

Sau đó, tôi lưu tập tin này như một tập tin SVG mới và nhận được dữ liệu đường dẫn từ tệp này. Bây giờ trong HTML mã mà không sự kỳ diệu như sau:

<div id="containerId">  
    <svg 
    id="svgId" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    x="0" 
    y="0" 
    width="100%" 
    height="100%" 
    viewBox="0 0 800 600" 
    preserveAspectRatio="none"> 
     <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/> 
    </svg> 
</div> 

Lưu ý rằng chiều rộng và chiều cao của SVG đều đặt tới 100%, vì chúng ta muốn nó để điền vào container theo chiều dọc và theo chiều ngang, nhưng chiều rộng và chiều cao của khung nhìn tương tự như chiều rộng và chiều cao của tài liệu trong inkscape là 800px X 600px. Điều tiếp theo bạn cần làm là đặt retainAspectRatio thành "none". Nếu bạn cần thêm thông tin về thuộc tính này, đây là một số tốt link. Và đó là tất cả để có nó.

Một điều nữa là mã này hoạt động trên hầu hết tất cả các trình duyệt chính, ngay cả trên các trình duyệt cũ nhưng trên một số phiên bản android và ios, bạn cần sử dụng một số mã javascrip/jQuery để duy trì tính nhất quán. Tôi sử dụng các chức năng sẵn sàng và thay đổi kích thước tài liệu sau:

$('#svgId').css({ 
    'width': $('#containerId').width() + 'px', 
    'height': $('#containerId').height() + 'px' 
}); 

Hy vọng điều đó sẽ hữu ích!