When an SVG <text>
or <tspan>
element has a specific length, set using the textLength
attribute, the lengthAdjust
attribute controls how the text is stretched or compressed into that length.
The two possible values for the attribute are spacing
and spacingAndGlyphs
. Using spacing
(the default), the letter forms are preserved, but the space between them grows or shrinks. Using spacingAndGlyphs
, the entire text element is stretched in the direction of the text.
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg"> <g font-face="sans-serif"> <text x="0" y="20" textLength="300" lengthAdjust="spacing"> Stretched using spacing only. </text> <text x="0" y="50" textLength="300" lengthAdjust="spacingAndGlyphs"> Stretched using spacing and glyphs. </text> <text x="0" y="80" textLength="100" lengthAdjust="spacing"> Shrunk using spacing only. </text> <text x="0" y="110" textLength="100" lengthAdjust="spacingAndGlyphs"> Shrunk using spacing and glyphs. </text> </g> </svg>
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/lengthAdjust