O elemento SVG <tspan>
define um subtexto dentro de um elemento <text>
ou outro elemento <tspan>
. Permite o ajuste do estilo e / ou posição desse subtexto, conforme necessário.
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>
Attributes
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
Global attributes
- Core Attributes
- Most notably:
id
,tabindex
- Styling Attributes
class
,style
- Conditional Processing Attributes
- Most notably:
requiredExtensions
,systemLanguage
- Event Attributes
- Global event attributes, Graphical event attributes
- Presentation Attributes
- 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
,transform
,vector-effect
,visibility
- Aria Attributes
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
Usage notes
Categorias | Elemento de conteúdo textual, Elemento filho de conteúdo textual |
---|---|
Conteúdo permitido | Dados de caracteres e qualquer número dos seguintes elementos, em qualquer ordem: Elementos descritivos <a> , <altGlyph> , <animate> , <animateColor> , <set> , <tref> , <tspan> |
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of '<tspan>' in that specification. |
Candidata a Recomendação | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<tspan>' in that specification. |
Recomendação | Initial definition |
Browser compatibility
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.