Câu trả lời:
Chiều rộng và chiều cao chỉ có liên quan khi viewBox
được đặt. Nếu không có thuộc tính đó, bạn có thể xóa chiều rộng và chiều cao một cách an toàn. Nó sẽ luôn hiển thị ở tỷ lệ mà nó được vẽ. Nếu a <rect>
được đặt cao 10px rộng 20px, nó sẽ hiển thị ở tỷ lệ đó là 10x20 có hoặc không có chiều rộng hoặc cao khi không có viewBox được đặt.
Nếu một viewBox
thuộc tính được đặt, bạn có thể sử dụng chiều rộng và chiều cao để điều chỉnh tỷ lệ ban đầu lên hoặc xuống.
Không có chiều rộng và chiều cao nhưng viewBox được thiết lập, điều này sẽ cho phép các Svg mở rộng vô hạn, có thể có hoặc không có hành vi mong muốn. Trong một trang HTML đáp ứng, điều này thường được mong muốn. Nó sẽ mở rộng lên hoặc xuống để vừa với thùng chứa giới hạn.
Đây là giống nhau
<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg">
Điều này tăng gấp đôi quy mô ban đầu.
<svg viewBox="0 0 120 120" width="240" height="240"
xmlns="http://www.w3.org/2000/svg">
Điều này cho phép mở rộng vô hạn
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">