Có bất kỳ khái niệm về kích thước trong một SVG?


11

Tôi đã tự hỏi về các tập tin SVG. Tôi biết đó là một tập hợp các vectơ được xác định bởi các thẻ đường dẫn trong XML, vậy tại sao nó có chiều rộng và chiều cao tính bằng pixel trong thẻ svg và nếu chúng ta loại bỏ các kích thước đó thì sao?

Câu trả lời:


14

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 viewBoxthuộ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">
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.