Draft for Information Only
Content
<tspan> Example Attributes Global attributes Usage notes Specifications Sources and References
<tspan>
The SVG <tspan> element defines a subtext within a <text> <tspan> element. It allows for adjustment of the style and/or position of that subtext as needed.
SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg style='border:1px solid black' width='320' height='130' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<svg width='266' height='106' viewBox='-25, -25, 266, 106' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
<path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
</pattern>
<pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
<rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
<path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
</pattern>
<rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
<svg transform='scale(0.902255639097744)' preserveAspectRatio='xMinYMin' viewBox='0 0 120 40' xmlns='http://www.w3.org/2000/svg'>
<style>
text { font: italic 12px serif; }
tspan { font: bold 10px sans-serif; fill: red; }
/* Note that the color of the text is set with the *
* fill property, the color property is for HTML only */
.Rrrrr { font: italic 40px serif; fill: red; }
</style>
<text x='10' y='30' class='small'>
You are
<tspan>not</tspan>
a banana!
</text>
</svg>
</svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='235' y='17' font-size='20'>(120,0)</text>
<text x='5' y='125' font-size='20'>(0,40)</text>
<text x='235' y='125' font-size='20'>(120,40)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='265' cy='25' r='2' fill='black'/>
<circle cx='25' cy='105' r='2' fill='black'/>
<circle cx='265' cy='105' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:
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
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
Scalable Vector Graphics (SVG) 1.1 (Second Edition) (SVG)
Sources and References
https://www.w3.org/TR/SVG2/text.html
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan
©sideway ID: 211200031 Last Updated: 12/31/2021 Revision: 0 Ref:
References
http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
Nu Html Checker 
53 
na 
na