SVGTextPathElement

Instance properties

This interface also inherits properties from its parent interface, SVGTextContentElement.

SVGTextPathElement.href Read only

An SVGAnimatedString corresponding to the href or xlink:href attribute of the given element.

SVGTextPathElement.side Read only

An SVGAnimatedEnumeration corresponding to the side attribute of the given element. Allowed values are specified by the TEXTPATH_SIDETYPE_* constants defined on this interface.

SVGTextPathElement.startOffset Read only

An SVGAnimatedLength corresponding to the X component of the startOffset attribute of the given element.

SVGTextPathElement.method Read only

An SVGAnimatedEnumeration corresponding to the method attribute of the given element. Allowed values are specified by the TEXTPATH_METHODTYPE_* constants defined on this interface.

SVGTextPathElement.spacing Read only

An SVGAnimatedEnumeration corresponding to the spacing attribute of the given element. Allowed values are specified by the TEXTPATH_SPACINGTYPE_* constants defined on this interface.

Instance methods

This interface does not provide any specific methods, but implements those of its parent, SVGTextContentElement.

Static properties

TEXTPATH_METHODTYPE_UNKNOWN (0)

The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

TEXTPATH_METHODTYPE_ALIGN (1)

Corresponds to the value align.

TEXTPATH_METHODTYPE_STRETCH (2)

Corresponds to the value stretch.

TEXTPATH_SPACINGTYPE_UNKNOWN (0)

The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

TEXTPATH_SPACINGTYPE_AUTO (1)

Corresponds to the value auto.

TEXTPATH_SPACINGTYPE_EXACT (2)

Corresponds to the value exact.

TEXTPATH_SIDETYPE_UNKNOWN (0)

The type is not one of the predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

TEXTPATH_SIDETYPE_LEFT (1)

Corresponds to the value left.

TEXTPATH_SIDETYPE_RIGHT (2)

Corresponds to the value right.

Examples

Basic usage

This example shows how you can set and get the properties of an SVGTextPathElement.

HTML

First we define the SVG and associated CSS to draw a path with text drawn along it (this is a near-copy of the SVG in the path attribute topic).

html,
body,
svg {
  height: 400px;
  width: auto; /* Keeps the aspect ratio */
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
  <path
    id="MyPath"
    fill="none"
    stroke="red"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />

  <text>
    <textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>
  </text>
</svg>

We also add a button for toggling the side property in order to change what side of the path the text is drawn on. Note that there is also hidden logging code that is not relevant to the example.

<button id="toggleBtn">Toggle side</button>

<pre id="log"></pre>

#log {
  height: 120px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

The code below toggles the side.baseVal property on the textPath, causing the text to swap sides.

First we define a function to log each of the properties of the the path element, and call it to log the initial state on load. The side.baseVale property is logged first, and demonstrates how the enumerated constants may be read and interpreted (this is done in a try...catch block, because side is not supported in all browsers). The other properties of the text path are also logged, but as raw values of their associated baseVal property.

const textPath = document.querySelector("textPath");

function logPathBaseVal() {
  // Log the baseVal for each property
  log("LOG:");

  try {
    let side;

    if (textPath.side.baseVal === SVGTextPathElement.TEXTPATH_SIDETYPE_RIGHT) {
      side = "right";
    } else if (
      textPath.side.baseVal === SVGTextPathElement.TEXTPATH_SIDETYPE_LEFT
    ) {
      side = "left";
    } else if (
      textPath.side.baseVal === SVGTextPathElement.TEXTPATH_SIDETYPE_UNKNOWN
    ) {
      side = "unknown";
    } else {
      side = "unexpected value";
    }
    log(` Current side: ${side}`);
  } catch {
    log(`side property is not supported in this browser`);
  }

  log(` href: ${textPath.href.baseVal}`);
  log(` method: ${textPath.method.baseVal}`);
  log(` spacing: ${textPath.spacing.baseVal}`);
  log(` startOffset: ${textPath.startOffset.baseVal}`);
}

// Log the initial state on load
logPathBaseVal();

The toggle button event handler code is shown below This reads the current value of the side.baseVal property, and toggles the value to match the other side. It then logs the current state.

// Toggle the side when the button is clicked
toggleBtn.addEventListener("click", () => {
  try {
    if (textPath.side.baseVal === SVGTextPathElement.TEXTPATH_SIDETYPE_RIGHT) {
      // Change to left
      textPath.side.baseVal = SVGTextPathElement.TEXTPATH_SIDETYPE_LEFT;
    } else {
      // Change to right
      textPath.side.baseVal = SVGTextPathElement.TEXTPATH_SIDETYPE_RIGHT;
    }

    // Log the updated state
    logPathBaseVal();
  } catch (e) {
    log("Setting the side property is not supported in this browser.");
  }
});

Result

Press the button to toggle the states.

Specifications

Browser compatibility

See also

• <textPath>