Tôi có thể mở rộng chiều rộng SVG bằng CSS như thế nào?

Question

Tôi đang sử dụng thư viện js Google's Charts js. Nó hoạt động rất tốt và tạo ra các đồ thị tuyệt vời cho dữ liệu của chúng tôi.

Thật không may, do cách nó được tạo ra, nó không đáp ứng, vì vậy nếu kích thước màn hình thay đổi, nó không thay đổi để phù hợp. Tôi đã nhận được giải pháp đó thông qua chức năng redraw được đặt thành window.onresize, do đó đã được khắc phục.

Dường như việc in không được coi là một sự kiện thay đổi kích thước và do đó vẽ lại không được gọi. Tôi có một css chỉ in, phần còn lại của trang trông tuyệt vời khi được in, nhưng biểu đồ vẫn giữ nguyên kích thước như trong cửa sổ trình duyệt. Tôi có thể làm cho cửa sổ nhỏ hơn, và nó in mà không làm tăng quy mô trang, nhưng đó không phải là một giải pháp thực sự.

Tôi đã thử:

thêm svg{width:100%;} để print.css - không tốt

Tôi chưa thử:

làm cho đồ thị có kích thước bộ rằng SẼ in độc đáo - đây có vẻ như một hack, và tôi không muốn làm điều đó nếu có thể.

EDIT

Một sửa đổi: bảng xếp hạng API của Google tạo ra svg như một <svg> trong một <div>. Nó không phải là một hình nền.

Answer 1

Đây là một giới thiệu:

https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds

và giải pháp của tôi:

Sau một số thử nghiệm và báo lỗi, đây là những gì tôi tìm thấy.

Thêm (với CSS gốc):

html { 
    height: 100% 
} 

giao chính xác những gì tôi đang tìm kiếm trong spec gốc.

Thêm vào đó, nếu tôi muốn hình ảnh là trung tâm khi nó được cắt, tôi có thể sử dụng:

html { 
    background: url(path/to/image.jpg) no-repeat center center fixed; 
    background-size: cover; 
} 

Cuối cùng, nếu tôi muốn nó được làm trung tâm, luôn duy trì tỷ lệ khía cạnh, nhưng không được cắt xén (ví dụ, một số khoảng trống là OK) thì tôi có thể làm:

body { 
    background: url(/path/to/image.svg) no-repeat center center fixed; 
    background-size: contain; 
}