W3cubDocs

/SVG

lengthAdjust

The lengthAdjust attribute controls how the text is stretched into the length defined by the textLength attribute.

You can use this attribute with the following SVG elements:

Example

<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>

Usage notes

Value spacing | spacingAndGlyphs
Default value spacing
Animatable Yes

Specifications

Specification
Scalable Vector Graphics (SVG) 2>
# TextElementLengthAdjustAttribute>

Browser compatibility

>

svg.elements.text.lengthAdjust

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS
lengthAdjust 1 12 1.5 15 3 18 4 14 2 1.0 4.4 2

svg.elements.tspan.lengthAdjust

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS
lengthAdjust 1 79 No 15 3 18 No 14 2 1.0 4.4 2

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/lengthAdjust