Firefox Tomorrow

svg element

<tspan>

View on MDN ↗

The <tspan> SVG 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.

[!NOTE] The <tspan> element does not wrap by default, to make this happen it needs to be styled with the white-space CSS property.

Usage context

Attributes

  • x
    • : The x coordinate of the starting point of the text baseline, or the x coordinate of each individual glyph if a list of values is provided. Value type: List of (<length> | <percentage>); Default value: 0; Animatable: yes
  • y
    • : The y coordinate of the starting point of the text baseline, or the y coordinate of each individual glyph if a list of values is provided. Value type: List of (<length> | <percentage>); Default value: 0; Animatable: yes
  • dx
    • : Shifts the text position horizontally from a previous text element, or shifts the position of each individual glyph if a list of values is provided. Value type: List of (<length> | <percentage>); Default value: none; Animatable: yes
  • dy
    • : Shifts the text position vertically from a previous text element, or shifts the position of each individual glyph if a list of values is provided. Value type: List of (<length> | <percentage>); Default value: none; Animatable: yes
  • rotate
    • : Rotates orientation of each individual glyph. Can rotate glyphs individually. Value type: <list-of-number>; Default value: none; Animatable: yes
  • lengthAdjust
    • : How the text is stretched or compressed to fit the width defined by the textLength attribute. Value type: spacing | spacingAndGlyphs; Default value: spacing; Animatable: yes
  • textLength
    • : A width that the text should be scaled to fit. Value type: <length> | <percentage>; Default value: none; Animatable: yes

DOM Interface

This element implements the SVGTSpanElement interface.

Example

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg">
  <style>
    text {
      font: italic 12px serif;
    }
    tspan {
      font: bold 10px sans-serif;
      fill: red;
    }
  </style>

  <text x="10" y="30" class="small">
    You are
    <tspan>not</tspan>
    a banana!
  </text>
</svg>
Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also