SVG <văn bản> và <tspan>
Văn bản SVG - <văn bản>
Phần tử <text> được sử dụng để xác định văn bản.
Phần tử <text> có bảy thuộc tính cơ bản để định vị và xoay văn bản:
| Attribute | Description |
|---|---|
| x | The x position of the start of the text. Default is 0 |
| y | The y position of the start of the text. Default is 0 |
| dx | The horizontal shift position for text (from previous text position) |
| dy | The vertical shift position for text (from previous text position) |
| rotate | The rotation (in degrees) applied to each letter of text |
| textLength | The width that the text must fit in |
| lengthAdjust | How the text should be compressed or stretched to fit the width defined by the textLength attribute |
Một văn bản đơn giản
Viết một văn bản đơn giản với SVG:
Đây là mã SVG:
Ví dụ
<svg height="30" width="200" xmlns="https://www.w3.org/2000/svg">
<text x="5" y="15" fill="red">I love SVG!</text>
</svg> Hãy tự mình thử »Một văn bản không có điền
Một văn bản chỉ không có màu tô và nét:
Đây là mã SVG:
Ví dụ
<svg height="40" width="200" xmlns="https://www.w3.org/2000/svg">
<text x="5" y="30" fill="none" stroke="red" font-size="35">I love
SVG!</text>
</svg> Hãy tự mình thử »Một văn bản có tô và nét
Một văn bản có điền và nét:
Đây là mã SVG:
Ví dụ
<svg height="40" width="200" xmlns="https://www.w3.org/2000/svg">
<text x="5" y="30" fill="pink" stroke="blue" font-size="35">I love
SVG!</text>
</svg> Hãy tự mình thử »Xoay từng chữ cái của văn bản
Xoay từng chữ cái trong văn bản theo một độ bằng thuộc tính rotate :
Đây là mã SVG:
Ví dụ
<svg height="40" width="200">
<text x="5" y="30" fill="red"
font-size="35" rotate="30">I love SVG!</text>
</svg>
Hãy tự mình thử » Xoay toàn bộ văn bản
Xoay toàn bộ văn bản với thuộc tính transform :
Đây là mã SVG:
Ví dụ
<svg height="100" width="200">
<text x="5" y="30" fill="red"
font-size="25" transform="rotate(30 20,40)">I love SVG!</text>
</svg>
Hãy tự mình thử »Văn bản SVG - <tspan>
Phần tử <tspan> được sử dụng để đánh dấu các phần của văn bản (giống như phần tử HTML <span> ).
Phần tử <tspan> phải là phần tử con của phần tử <text> hoặc phần tử <tspan> khác.
Phần tử <tspan> có sáu thuộc tính cơ bản để định vị và xoay văn bản:
| Attribute | Description |
|---|---|
| x | Sets a new absolute x position for the start of the text in tspan |
| y | Sets a new absolute y position for the start of the text in tspan |
| dx | The horizontal shift position for text in tspan (from previous text position) |
| dy | The vertical shift position for text in tspan (from previous text position) |
| rotate | The rotation (in degrees) applied to each letter of text in tspan |
| textLength | The width that the text in tspan must fit in |
Sử dụng phần tử <tspan>
Sử dụng phần tử <tspan> bên trong phần tử <text> :
Đây là mã SVG:
Ví dụ
<svg height="40" width="250" xmlns="https://www.w3.org/2000/svg">
<text x="5" y="30" fill="red" font-size="35">I Love
<tspan
fill="none" stroke="green">SVG</tspan>!
</text>
</svg>
Hãy tự mình thử »