Firefox Tomorrow

web api instance property

SVGTextPathElement: spacing property

View on MDN ↗

The spacing read-only property of the SVGTextPathElement interface represents the spacing between typographic characters that are to be rendered along a path.

Note that the spacing.baseVal property reflects the spacing attribute of the given <textPath> element, as an enumerated value. While spacing is read-only, you can use spacing.baseVal to modify the value of the corresponding attribute.

In SVG 2, spacing.animVal also reflects the non-animated value of the attribute.

Value

An SVGAnimatedEnumeration object.

The following static properties indicate the values that can be returned from spacing.baseVal (and spacing.animVal):

Note that baseVal cannot be set to 0 (TEXTPATH_SPACINGTYPE_UNKNOWN) or any value other than those listed above. animVal is read-only and with throw if you attempt to write to it.

Examples

Accessing the spacing property

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <defs>
    <path id="myPath" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />
  </defs>
  <text font-size="20" fill="blue">
    <textPath id="myTextPath" href="#myPath" spacing="auto">
      This text follows a path!
    </textPath>
  </text>
</svg>

const textPath = document.getElementById("myTextPath");

// Access the spacing property
console.log(textPath.spacing.baseVal); // Output: 1 (TEXTPATH_SPACINGTYPE_AUTO)

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also