<text>
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.
<text> SVG vẽ một phần tử đồ họa gồm văn bản. Có thể áp dụng gradient, pattern, clipping path, mask hoặc filter cho <text>, giống như với bất kỳ phần tử đồ họa SVG nào khác.
Nếu văn bản được chèn vào SVG mà không nằm trong phần tử <text>, nó sẽ không được hiển thị. Điều này khác với việc bị ẩn mặc định, vì đặt thuộc tính display cũng sẽ không làm văn bản xuất hiện.
Note:
Phần tử <text> không tự động ngắt dòng. Để làm được điều đó, nó cần được định kiểu bằng thuộc tính CSS white-space.
Ngữ cảnh sử dụng
| Categories | Graphics element, Text content element |
|---|---|
| Permitted content | Character data and any number of the following elements, in any order: Animation elements Descriptive elements Text content child elements <a> |
Thuộc tính
x-
Tọa độ x của điểm bắt đầu baseline của văn bản, hoặc tọa độ x của từng glyph riêng lẻ nếu cung cấp một danh sách giá trị. Kiểu giá trị: Danh sách (<length> | <percentage>); Giá trị mặc định:
0; Có thể hoạt ảnh: có y-
Tọa độ y của điểm bắt đầu baseline của văn bản, hoặc tọa độ y của từng glyph riêng lẻ nếu cung cấp một danh sách giá trị. Kiểu giá trị: Danh sách (<length> | <percentage>); Giá trị mặc định:
0; Có thể hoạt ảnh: có dx-
Dịch chuyển vị trí văn bản theo chiều ngang so với phần tử văn bản trước đó, hoặc dịch chuyển vị trí của từng glyph riêng lẻ nếu cung cấp một danh sách giá trị. Kiểu giá trị: Danh sách (<length> | <percentage>); Giá trị mặc định: không có; Có thể hoạt ảnh: có
dy-
Dịch chuyển vị trí văn bản theo chiều dọc so với phần tử văn bản trước đó, hoặc dịch chuyển vị trí của từng glyph riêng lẻ nếu cung cấp một danh sách giá trị. Kiểu giá trị: Danh sách (<length> | <percentage>); Giá trị mặc định: không có; Có thể hoạt ảnh: có
rotate-
Xoay hướng của từng glyph riêng lẻ. Có thể xoay các glyph riêng biệt. Kiểu giá trị: <list-of-number>; Giá trị mặc định: none; Có thể hoạt ảnh: có
lengthAdjust-
Văn bản được kéo giãn hoặc nén như thế nào để phù hợp với chiều rộng được xác định bởi thuộc tính
textLength. Kiểu giá trị:spacing|spacingAndGlyphs; Giá trị mặc định:spacing; Có thể hoạt ảnh: có textLength-
Chiều rộng mà văn bản nên được co giãn để vừa khít. Kiểu giá trị: <length> | <percentage>; Giá trị mặc định: không có; Có thể hoạt ảnh: có
Giao diện DOM
Phần tử này triển khai giao diện SVGTextElement.
Ví dụ
<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
<style>
.small {
font: italic 13px sans-serif;
}
.heavy {
font: bold 30px sans-serif;
}
/* Note that the color of the text is set with the *
* fill property, the color property is for HTML only */
.Rrrrr {
font: italic 40px serif;
fill: red;
}
</style>
<text x="20" y="35" class="small">My</text>
<text x="40" y="35" class="heavy">cat</text>
<text x="55" y="55" class="small">is</text>
<text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>
Đặc tả
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # TextElement |