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.
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.
<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>
x
The x coordinate of the starting point of the text baseline. Value type: <length>|<percentage> ; Default value: none; Animatable: yes
y
The y coordinate of the starting point of the text baseline. Value type: <length>|<percentage> ; Default value: none; Animatable: yes
dx
Shifts the text position horizontally from a previous text element. Value type: <length>|<percentage> ; Default value: none; Animatable: yes
dy
Shifts the text position vertically from a previous text element. Value type: <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
class
, style
Most notably: requiredExtensions
, systemLanguage
Most notably: clip-path
, clip-rule
, color
, color-interpolation
, color-rendering
, cursor
, display
, dominant-baseline
, fill
, fill-opacity
, fill-rule
, filter
, mask
, opacity
, pointer-events
, shape-rendering
, stroke
, stroke-dasharray
, stroke-dashoffset
, stroke-linecap
, stroke-linejoin
, stroke-miterlimit
, stroke-opacity
, stroke-width
, text-anchor
, vector-effect
, visibility
aria-activedescendant
, aria-atomic
, aria-autocomplete
, aria-busy
, aria-checked
, aria-colcount
, aria-colindex
, aria-colspan
, aria-controls
, aria-current
, aria-describedby
, aria-details
, aria-disabled
, aria-dropeffect
, aria-errormessage
, aria-expanded
, aria-flowto
, aria-grabbed
, aria-haspopup
, aria-hidden
, aria-invalid
, aria-keyshortcuts
, aria-label
, aria-labelledby
, aria-level
, aria-live
, aria-modal
, aria-multiline
, aria-multiselectable
, aria-orientation
, aria-owns
, aria-placeholder
, aria-posinset
, aria-pressed
, aria-readonly
, aria-relevant
, aria-required
, aria-roledescription
, aria-rowcount
, aria-rowindex
, aria-rowspan
, aria-selected
, aria-setsize
, aria-sort
, aria-valuemax
, aria-valuemin
, aria-valuenow
, aria-valuetext
, role
Categories | Text content element, Text content child element |
---|---|
Permitted content | Character data and any number of the following elements, in any order: Descriptive elements <a> , <altGlyph> , <animate> , <set> , <tref> , <tspan>
|
Specification |
---|
Scalable Vector Graphics (SVG) 2 # TextElement |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
tspan |
1 | 12 | 1.5 | 9 | 9 | 3 | 3 | Yes | 4 | Yes | 3 | Yes |
dx |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
dy |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
lengthAdjust |
No | No | No | No | No | No | No | No | No | No | No | No |
rotate |
Yes | ≤79 | Yes | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes |
textLength |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
x |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
y |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan