Tspan

The SVG <Tspan /> element defines a subtext within a <Text /> element or another <Tspan /> element. It allows for adjustment of the style and/or position of that subtext as needed.

import { Svg, Text, Tspan } from '@react-pdf/renderer';

const heading = { fontSize: 16 };

const Label = () => (
  <Svg viewBox="0 0 120 60" width={240} height={120}>
    <Text x="24" y="36" fill="#3e3e3e" style={heading}>
      React <Tspan fill="#e82200">pdf</Tspan>
    </Text>
  </Svg>
);

Show preview

Valid props

Prop name	Description	Type	Default
x	The x coordinate of the starting point of the text baseline.	String, Number	undefined
y	The y coordinate of the starting point of the text baseline.	String, Number	undefined

Valid props

On this page