<svg>

Ngữ cảnh sử dụng

Thuộc tính

baseProfile Deprecated

Hồ sơ ngôn ngữ SVG tối thiểu mà tài liệu yêu cầu. Kiểu giá trị: <string>; Giá trị mặc định: none; Có thể hoạt ảnh: không

height

Chiều cao hiển thị của viewport hình chữ nhật. (Không phải chiều cao của hệ tọa độ của nó.) Kiểu giá trị: <length> | <percentage>; Giá trị mặc định: auto; Có thể hoạt ảnh: có

preserveAspectRatio

Cách fragment svg phải bị biến dạng nếu nó được hiển thị với aspect ratio khác. Kiểu giá trị: (none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?; Giá trị mặc định: xMidYMid meet; Có thể hoạt ảnh: có

version Deprecated

Phiên bản SVG nào được dùng cho nội dung bên trong của phần tử. Kiểu giá trị: <number>; Giá trị mặc định: none; Có thể hoạt ảnh: không

viewBox

Tọa độ viewport SVG cho fragment SVG hiện tại. Kiểu giá trị: <list-of-numbers>; Giá trị mặc định: none; Có thể hoạt ảnh: có

width

Chiều rộng hiển thị của viewport hình chữ nhật. (Không phải chiều rộng của hệ tọa độ của nó.) Kiểu giá trị: <length> | <percentage>; Giá trị mặc định: auto; Có thể hoạt ảnh: có

x

Tọa độ x hiển thị của khối chứa svg. Không có tác dụng với phần tử svg ngoài cùng. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định: 0; Có thể hoạt ảnh: có

y

Tọa độ y hiển thị của khối chứa svg. Không có tác dụng với phần tử svg ngoài cùng. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định: 0; Có thể hoạt ảnh: có

Giao diện DOM

Phần tử này triển khai giao diện SVGSVGElement.

Ví dụ

Phần tử svg lồng nhau

Ví dụ này cho thấy rằng các phần tử svg lồng nhau không cần thuộc tính xmlns.

html,
body,
svg {
  height: 100%;
}

<svg
  viewBox="0 0 300 100"
  xmlns="http://www.w3.org/2000/svg"
  stroke="red"
  fill="grey">
  <circle cx="50" cy="50" r="40" />
  <circle cx="150" cy="50" r="4" />

  <svg viewBox="0 0 10 10" x="200" width="100">
    <circle cx="5" cy="5" r="4" />
  </svg>
</svg>

Sử dụng đơn vị viewport động

Trong ví dụ này, các thuộc tính height và width trên phần tử svg được đặt bằng giá trị viewport động 60vmin, tương đương 60% chiều rộng hoặc chiều cao của viewport, tùy giá trị nào nhỏ hơn.

<div class="resizer">
  <iframe
    class="resized"
    srcdoc='

<svg
  viewBox="0 0 400 400"
  xmlns="http://www.w3.org/2000/svg"
  height="60vmin"
  width="60vmin">
  <rect x="0" y="0" width="50%" height="50%" fill="tomato" opacity="0.75" />
  <rect
    x="25%"
    y="25%"
    width="50%"
    height="50%"
    fill="slategrey"
    opacity="0.75" />
  <rect x="50%" y="50%" width="50%" height="50%" fill="olive" opacity="0.75" />
  <rect
    x="0"
    y="0"
    width="100%"
    height="100%"
    stroke="cadetblue"
    stroke-width="0.5%"
    fill="none" />
</svg>

  '></iframe>
</div>

.resizer {
  display: flex;
  margin: 1rem;
  padding: 0;
  resize: both;
  overflow: hidden;
  border: 5px dotted red;
  height: 400px;
}
.resizer > .resized {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  border: 0;
}

Để thay đổi kích thước của iframe, hãy thử kéo thay đổi đường viền chấm đỏ từ góc dưới bên phải.

Đặc tả

Tương thích trình duyệt