<image>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Phần tử SVG <image> bao gồm các ảnh bên trong tài liệu SVG. Nó có thể hiển thị các tệp ảnh raster hoặc các tệp SVG khác.
Các định dạng ảnh duy nhất mà phần mềm SVG phải hỗ trợ là JPEG, PNG và các tệp SVG khác. Hành vi của GIF động là không xác định.
Các tệp SVG được hiển thị bằng <image> được xử lý như một ảnh: tài nguyên bên ngoài không được tải, kiểu :visited không được áp dụng, và chúng không thể tương tác. Để đưa vào các phần tử SVG động, hãy thử <use> với một URL bên ngoài. Để đưa vào các tệp SVG và chạy script bên trong chúng, hãy thử <object> bên trong <foreignObject>.
Note:
Tiêu chuẩn HTML định nghĩa <image> là một từ đồng nghĩa của <img> khi phân tích cú pháp HTML. Phần tử cụ thể này và hành vi của nó chỉ áp dụng bên trong tài liệu SVG hoặc SVG nội tuyến.
Ngữ cảnh sử dụng
| Categories | Graphics element, Graphics referencing element, Renderable element |
|---|---|
| Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements <animate>, <animateMotion>, <animateTransform>, <script>, <set>, <style> |
Thuộc tính
x-
Định vị ảnh theo chiều ngang tính từ gốc tọa độ. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định:
0; Có thể hoạt ảnh: có y-
Định vị ảnh theo chiều dọc tính từ gốc tọa độ. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định:
0; Có thể hoạt ảnh: có width-
Chiều rộng mà ảnh được hiển thị. Không giống như
<img>của HTML, thuộc tính này là bắt buộc. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định:auto; Có thể hoạt ảnh: có height-
Chiều cao mà ảnh được hiển thị. Không giống như
<img>của HTML, thuộc tính này là bắt buộc. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định:auto; Có thể hoạt ảnh: có href-
Trỏ tới một URL cho tệp ảnh. Kiểu giá trị: <URL>; Giá trị mặc định: không có; Có thể hoạt ảnh: không
preserveAspectRatio-
Điều khiển cách ảnh được co giãn. 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ó crossorigin-
Xác định giá trị của cờ thông tin xác thực cho các yêu cầu CORS. Kiểu giá trị: [
anonymous|use-credentials]?; Giá trị mặc định: Không có; Có thể hoạt ảnh: có decoding-
Cung cấp gợi ý cho trình duyệt về việc nên giải mã ảnh đồng bộ hay bất đồng bộ. Kiểu giá trị:
async | sync | auto; Giá trị mặc định:auto; Có thể hoạt ảnh: có fetchpriorityExperimental Non-standard-
Cung cấp gợi ý về mức độ ưu tiên tương đối nên dùng khi tìm nạp một ảnh bên ngoài. Các giá trị cho phép:
high-
Tìm nạp ảnh bên ngoài với mức ưu tiên cao hơn so với các tài nguyên bên ngoài khác.
low-
Tìm nạp ảnh bên ngoài với mức ưu tiên thấp hơn so với các tài nguyên bên ngoài khác.
auto-
Không đặt ưu tiên cho mức tìm nạp. Giá trị này được dùng nếu không đặt giá trị nào hoặc đặt giá trị không hợp lệ. Đây là giá trị mặc định.
xlink:hrefDeprecated-
Trỏ tới một URL cho tệp ảnh. Kiểu giá trị: <URL>; Giá trị mặc định: không có; Có thể hoạt ảnh: không
Giao diện DOM
Phần tử này triển khai giao diện SVGImageElement.
Ví dụ
Hiển thị cơ bản một ảnh PNG trong SVG:
SVG
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<image href="mdn_logo_only_color.png" height="200" width="200" />
</svg>
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2> # ImageElement> |
Khả năng tương thích trình duyệt
Xem thêm
- Thuộc tính
fetchpriority