SVG <đường dẫn văn bản>
Văn bản SVG - <textPath>
Phần tử <textPath>
được sử dụng để hiển thị văn bản dọc theo hình dạng của đường dẫn.
Phần tử <textPath>
có sáu thuộc tính cơ bản:
Attribute | Description |
---|---|
href | The URL to the path to render the text |
lengthAdjust | How to compress or stretch the text to fit the width defined by the textLength attribute. Can be spacing|spacingAndGlyphs. Default is spacing |
method | How to render the glyphs along the path. Can be align|stretch. Default is align |
spacing | The space between glyphs. Can be auto|exact. Default is exact |
startOffset | How far the beginning of the text should be offset from the beginning of the path. Can be a length, percentage or a number |
textLength | The width of the text along the path. Can be a length, percentage or a number. Default is auto |
Văn bản dọc theo một con đường
Sử dụng phần tử <textPath>
bên trong phần tử <text>
:
Đây là mã SVG:
Ví dụ
<svg height="200" width="350" xmlns="https://www.w3.org/2000/svg">
<path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2"
fill="none"/>
<text style="fill:red;font-size:25px;">
<textPath href="#lineAC" startOffset="80">I love SVG! I love SVG!</textPath>
</text>
</svg>
Hãy tự mình thử »Văn bản dọc theo một con đường 2
Ở đây chúng tôi sử dụng thuộc tính textLength
để xác định độ rộng của văn bản đến 100% đường dẫn:
Đây là mã SVG:
Ví dụ
<svg height="200" width="350" xmlns="https://www.w3.org/2000/svg">
<path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2"
fill="none"/>
<text style="fill:red;font-size:25px;">
<textPath href="#lineAC" textLength="100%" startOffset="20">I love SVG! I love SVG!</textPath>
</text>
</svg>
Hãy tự mình thử »