<foreignObject>
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.
Phần tử SVG <foreignObject> bao gồm các phần tử từ một không gian tên XML khác. Trong ngữ cảnh của trình duyệt, đó nhiều khả năng là (X)HTML.
Ngữ cảnh sử dụng
| Categories | Graphics element, Renderable element |
|---|---|
| Permitted content | Any elements or character data |
Thuộc tính
height-
Chiều cao của foreignObject. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định:
auto; Có thể hoạt ảnh: có width-
Chiều rộng của foreignObject. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định:
auto; Có thể hoạt ảnh: có x-
Tọa độ x của foreignObject. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định:
0; Có thể hoạt ảnh: có y-
Tọa độ y của foreignObject. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định:
0; Có thể hoạt ảnh: có
Note:
Bắt đầu từ SVG2, x, y, width và height là Geometry Properties (thuộc tính hình học), nghĩa là các thuộc tính đó cũng có thể được dùng như thuộc tính CSS cho phần tử này.
Giao diện DOM
Phần tử này triển khai giao diện SVGForeignObjectElement.
Ví dụ
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<style>
div {
color: white;
font: 18px serif;
height: 100%;
overflow: auto;
}
</style>
<polygon points="5,5 195,10 185,185 10,195" />
<!-- Cách dùng phổ biến: nhúng văn bản HTML vào SVG -->
<foreignObject x="20" y="20" width="160" height="160">
<!--
Trong ngữ cảnh SVG được nhúng trong tài liệu HTML, không gian tên XHTML
có thể được bỏ qua, nhưng nó là bắt buộc trong ngữ cảnh của
một tài liệu SVG
-->
<div xmlns="http://www.w3.org/1999/xhtml">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis
mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum
imperdiet eros. Aliquam erat volutpat.
</div>
</foreignObject>
</svg>
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # ForeignObjectElement |