letter-spacing - SVG 编辑

The letter-spacing attribute controls spacing between text characters, in addition to any spacing from the kerning attribute.

If the attribute value is a unitless number (like 128), the browser processes it as a length in the current user coordinate system.

If the attribute value has a unit identifier, such as .25em or 1%, then the browser converts the <length> into its corresponding value in the current user coordinate system.

Note: As a presentation attribute, letter-spacing can be used as a CSS property. See the css letter-spacing property for more information.

As a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altGlyph>, <text>, <textPath>, <tref>, and <tspan>

html, body, svg {
  height: 100%;
}

<svg viewBox="0 0 400 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" letter-spacing="2">Bigger letter-spacing</text>
  <text x="200" y="20" letter-spacing="-0.5">Smaller letter-spacing</text>
</svg>

Usage notes

Value	normal | length
Default value	normal
Animatable	Yes

For a description of the values, please refer to the CSS letter-spacing property.

As of May 2019, Firefox ignores letter-spacing and renders text without.

Specifications

Specification	Status	Comment
CSS Text Module Level 3 letter-spacing	Working Draft	SVG 2 just refers to the definition in CSS Text 3.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) letter-spacing	Recommendation	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.

See also

• css letter-spacing