<tspan>
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 <tspan> xác định một đoạn con trong phần tử <text> hoặc trong một phần tử <tspan> khác. Nó cho phép điều chỉnh kiểu và/hoặc vị trí của đoạn con đó khi cần.
Note:
Phần tử <tspan> không tự ngắt dòng theo mặc định; để làm được điều này, nó cần được tạo kiểu bằng thuộc tính CSS white-space.
Ngữ cảnh sử dụng
| Categories | Text content element, Text content child element |
|---|---|
| Permitted content | Character data and any number of the following elements, in any order: Descriptive elements <a>, <animate>, <set>, <tspan> |
Thuộc tính
x-
Tọa độ x của điểm bắt đầu của đường cơ sở 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 của đường cơ sở 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 từ 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 từ 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 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-
Cách văn bản được kéo giãn hoặc nén để khớ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-
Một chiều rộng mà văn bản sẽ được co giãn để vừa khớp. 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 SVGTSpanElement.
Ví dụ
<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg">
<style>
text {
font: italic 12px serif;
}
tspan {
font: bold 10px sans-serif;
fill: red;
}
</style>
<text x="10" y="30" class="small">
Bạn là
<tspan>không phải</tspan>
một quả chuối!
</text>
</svg>
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # TextElement |