TSPAN

tspan is an element in Scalable Vector Graphics (SVG) used inside a text context to group and style a portion of text. It allows precise positioning and styling of substrings within a single text element, enabling mixed colors, font properties, rotation, and exact placement without creating separate text nodes.

Within a text element, tspans can be nested and each tspan can carry attributes for its own positioning and appearance while inheriting font and other properties from the parent text element. This makes it useful for applying different styles to parts of a line or for repositioning sub-strings for layout effects.

Key features and attributes include positioning and rotation: x and y set the starting position of the first character in the tspan, while dx and dy adjust the position relative to the previous character or position. The rotate attribute can rotate the tspan around its anchor point. The textLength attribute, together with lengthAdjust, can influence how the rendered length of the tspan is computed. In addition to these, standard presentation attributes such as fill, stroke, and font properties can be applied directly to a tspan or inherited from the parent.

tspan is commonly used to create inline styling within a single text node, to make line breaks or vertical shifts by applying dy to subsequent tspans, or to anchor substrings at specific coordinates for complex text layouts. It is supported in modern SVG implementations and remains a fundamental tool for fine-grained text control.

See also: SVG text element, SVG textPath, and related SVG typography concepts.