Components
Text
Render SVG text with auto-wrapping, rotation, and scaling
<Text> renders SVG <text> elements with support for automatic line wrapping, rotation, and scale-to-fit.
Basic usage
<svg :width="300" :height="100">
<Text :x="10" :y="50" value="Hello World" />
</svg>
Auto-wrap text
Set width to enable automatic word wrapping:
<Text :x="10" :y="20" :width="120" value="This is a long text that will wrap across multiple lines" />
Break all characters
Use break-all to split by character instead of word:
<Text :x="10" :y="20" :width="80" break-all value="Superlongword" />
Limit lines
Use max-lines to truncate with ellipsis:
<Text :x="10" :y="20" :width="120" :max-lines="2" value="Very long text that gets truncated after two lines with an ellipsis character" />
Rotate text
<Text :x="100" :y="100" :angle="45" value="Rotated" />
Scale to fit
Shrink text to fit within a given width:
<Text :x="10" :y="50" :width="100" scale-to-fit value="Fit this text in 100px" />
Vertical anchor
Control vertical alignment relative to the y coordinate:
<Text :y="100" vertical-anchor="start" value="Below the line" />
<Text :y="100" vertical-anchor="middle" value="Centered on the line" />
<Text :y="100" vertical-anchor="end" value="Above the line" />
Text props
| Prop | Type | Default | Description |
|---|---|---|---|
x | number | string | 0 | X position |
y | number | string | 0 | Y position |
dx | number | — | Horizontal offset |
dy | number | — | Vertical offset |
value | string | number | '' | Text content |
width | number | string | — | Wrapping width |
angle | number | 0 | Rotation angle in degrees |
scaleToFit | boolean | false | Scale text to fit width |
textAnchor | 'start' | 'middle' | 'end' | 'start' | Horizontal alignment |
verticalAnchor | 'start' | 'middle' | 'end' | 'end' | Vertical alignment |
fill | string | '#808080' | Text fill color |
lineHeight | number | string | '1em' | Line height |
capHeight | number | string | '0.71em' | Cap height for baseline |
breakAll | boolean | false | Break by character |
maxLines | number | — | Max lines before truncation |
style | object | {} | Inline CSS styles |