<SVGText />

Renders an SVG <text> element with JointJS-quality text layout: word wrapping, custom line breaks, vertical alignment, line height, text-on-path, and rich annotations. Use it inside <Paper renderElement={...}> to label or caption an element; its children must be a single string.

The text is laid out with the JointJS Vectorizer (V(...).text()), and textWrap runs util.breakText so long strings wrap to the element's width. See SVGTextProps for every supported option.

Examples

Basic label

import { Paper, SVGText } from '@joint/react';

// Label each element with a static caption.
<Paper renderElement={() => <SVGText x={10} y={20}>Hello World</SVGText>} />

Wrap text to a fixed width

import { Paper, SVGText } from '@joint/react';

// Wrap a long caption to the element's current width.
<Paper
  renderElement={() => (
    <SVGText x={10} y={20} width={100} textWrap>
      This is a long text that will wrap to multiple lines
    </SVGText>
  )}
/>

Vertical anchor, line height, and line breaks

import { Paper, SVGText } from '@joint/react';

// A real "\n" in the string is what splits the content into two lines, so
// pass it through an expression container (not raw JSX text, where "\n"
// stays literal). textVerticalAnchor centers the block and lineHeight sets
// the spacing between the lines.
<Paper
  renderElement={() => (
    <SVGText x={10} y={20} textVerticalAnchor="middle" lineHeight={1.5}>
      {'Line 1\nLine 2'}
    </SVGText>
  )}
/>

Props

annotations?

optional annotations?: TextAnnotation[];

displayEmpty?

optional displayEmpty?: boolean;

eol?

optional eol?: string;

height?

readonly optional height?: number;

Maximum height in pixels for the textWrap pass; lines that overflow it are dropped.

includeAnnotationIndices?

optional includeAnnotationIndices?: boolean;

lineHeight?

optional lineHeight?: string | number;

textPath?

optional textPath?: 
  | string
  | {
[key: string]: any;
};

textVerticalAnchor?

optional textVerticalAnchor?: string | number;

textWrap?

readonly optional textWrap?: boolean | BreakTextOptions;

Wrap the text to the available width using the JointJS util.breakText algorithm. Pass true for the defaults, or an options object to fine-tune wrapping (ellipsis, max line count, hyphenation, …).

Default

false

---

useNoBreakSpace?

optional useNoBreakSpace?: boolean;

width?

readonly optional width?: number;

Wrapping width in pixels for the textWrap pass. Falls back to the graph element's current width when omitted.