24
Tôi muốn nhúng một số SVG vào trang HTML theo cách được tự động thay đổi kích thước (sử dụng SVG, CSS hoặc JS) khi trang được thay đổi kích thước, trong khi vẫn giữ nguyên tỷ lệ khung hình gốc.Tự động tính toán SVG được nhúng trong HTML khi đổi kích thước cửa sổ
Ví dụ, sử dụng một ví dụ từ W3Schools:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
Có thể thiết lập chiều rộng SVG = 5% chiều rộng cửa sổ, và đã chiều cao quy mô tương ứng?
Tôi đã thử một vài thứ bao gồm preserveAspectRatio="xMinYMin meet" và đặt kích thước thành 100% trong một vùng chứa <div> nhưng chưa hoạt động.
Mọi đề xuất?
Điều đó đã xảy ra. Bạn có biết hai tham số cuối cùng cho viewBox được xử lý như thế nào? Tăng chúng dường như * giảm * kích thước của hình ảnh. –
Những con số này là chiều rộng và chiều cao được sử dụng của hình ảnh của bạn. Trong ví dụ của bạn từ trên nó sẽ vòng tròn + bán kính: cx + r = width (140) và cy + r = height (90). Lựa chọn tốt nhất của bạn là lưu hình ảnh thông qua phần mềm đồ họa như Inkscape, tính toán kích thước tổng thể và ghi thuộc tính viewBox vào tệp. Nếu sử dụng Inkscape, hãy đảm bảo bạn chọn "SVG Inkscape tối ưu hóa", điều này sẽ dẫn đến mã nguồn XML có kích thước nhỏ hơn và dễ hiểu hơn. – feeela
Câu trả lời này vừa lưu lại ngày của tôi! – qed