Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

lengthAdjust

This article needs a technical review. How you can help.

This article needs an editorial review. How you can help.

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 text fitting using lengthAdjust

HTML Content

<svg width="300" height="150" xmlns="https://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>

Result

Document Tags and Contributors

 Contributors to this page: y6nH
 Last updated by: y6nH,