Text

import { Text } from 'cx/svg';

The Text component renders SVG text as a bounded object. The initial cursor position is the top-left corner of the bounding box. Use textAnchor and dominantBaseline attributes to position the text within its bounds.

This example demonstrates all 9 text alignment combinations using anchors, textAnchor, and dominantBaseline:

 <div class="flex flex-wrap gap-2">
  <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
    <Rectangle anchors="0 1 1 0" style="fill: lightblue" />
    <Text anchors="0 1 1 0" textAnchor="start" dominantBaseline="hanging">
      Top-left
    </Text>
  </Svg>
  <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
    <Rectangle anchors="0 1 1 0.5" style="fill: lightblue" />
    <Text anchors="0 1 1 0.5" textAnchor="middle" dominantBaseline="hanging">
      Top-center
    </Text>
  </Svg>
  <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
    <Rectangle anchors="0 1 1 1" style="fill: lightblue" />
    <Text anchors="0 1 1 1" textAnchor="end" dominantBaseline="hanging">
      Top-right
    </Text>
  </Svg>

  <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
    <Rectangle anchors="0.5 1 1 0" style="fill: lightblue" />
    <Text anchors="0.5 1 1 0" textAnchor="start" dominantBaseline="middle">
      Middle-left
    </Text>
  </Svg>
  <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
    <Rectangle anchors="0.5 1 1 0.5" style="fill: lightblue" />
    <Text anchors="0.5 1 1 0.5" textAnchor="middle" dominantBaseline="middle">
      Center
    </Text>
  </Svg>
  <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
    <Rectangle anchors="0.5 1 1 1" style="fill: lightblue" />
    <Text anchors="0.5 1 1 1" textAnchor="end" dominantBaseline="middle">
      Middle-right
    </Text>
  </Svg>

  <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
    <Rectangle anchors="1 1 1 0" style="fill: lightblue" />
    <Text anchors="1 1 1 0" textAnchor="start">
      Bottom-left
    </Text>
  </Svg>
  <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
    <Rectangle anchors="1 1 1 0.5" style="fill: lightblue" />
    <Text anchors="1 1 1 0.5" textAnchor="middle">
      Bottom-center
    </Text>
  </Svg>
  <Svg style="width: 100px; height: 100px; border: 1px dashed #ddd">
    <Rectangle anchors="1 1 1 1" style="fill: lightblue" />
    <Text anchors="1 1 1 1" textAnchor="end">
      Bottom-right
    </Text>
  </Svg>
</div> 

Alignment Guide

Horizontal alignment is controlled by textAnchor:

textAnchor="start" — align to left edge
textAnchor="middle" — center horizontally
textAnchor="end" — align to right edge

Vertical alignment is controlled by dominantBaseline:

dominantBaseline="hanging" — top alignment (text hangs below the anchor)
dominantBaseline="middle" — center vertically
Default (no value) — bottom alignment (baseline sits on the anchor)

Configuration

Property	Type	Description
`anchors`	`string/number`	Position within parent bounds. Format: `"t r b l"`. See Svg for details.
`offset`	`string/number`	Translate edges in pixels. Format: `"t r b l"`. See Svg for details.
`margin`	`string/number`	CSS-like margin. See Svg for details.
`textAnchor / ta`	`string`	Horizontal alignment: `"start"`, `"middle"`, or `"end"`.
`dominantBaseline / db`	`string`	Vertical alignment: `"hanging"`, `"middle"`, `"auto"`, etc.
`dx`	`string`	Horizontal offset from the anchor point.
`dy`	`string`	Vertical offset from the anchor point.
`fill`	`string`	Text fill color.
`colorIndex`	`number`	Index in the default color palette.