SVGTextPathElement

Statische Eigenschaften

TEXTPATH_METHODTYPE_UNKNOWN (0)

Der Typ gehört nicht zu den vordefinierten Typen. Es ist ungültig, einen neuen Wert dieses Typs zu definieren oder einen bestehenden Wert auf diesen Typ zu setzen.

TEXTPATH_METHODTYPE_ALIGN (1)

Entspricht dem Wert align.

TEXTPATH_METHODTYPE_STRETCH (2)

Entspricht dem Wert stretch.

TEXTPATH_SPACINGTYPE_UNKNOWN (0)

Der Typ gehört nicht zu den vordefinierten Typen. Es ist ungültig, einen neuen Wert dieses Typs zu definieren oder einen bestehenden Wert auf diesen Typ zu setzen.

TEXTPATH_SPACINGTYPE_AUTO (1)

Entspricht dem Wert auto.

TEXTPATH_SPACINGTYPE_EXACT (2)

Entspricht dem Wert exact.

TEXTPATH_SIDETYPE_UNKNOWN (0)

Der Typ gehört nicht zu den vordefinierten Typen. Es ist ungültig, einen neuen Wert dieses Typs zu definieren oder einen bestehenden Wert auf diesen Typ zu setzen.

TEXTPATH_SIDETYPE_LEFT (1)

Entspricht dem Wert left.

TEXTPATH_SIDETYPE_RIGHT (2)

Entspricht dem Wert right.

Instanzeigenschaften

Diese Schnittstelle erbt außerdem Eigenschaften von ihrer übergeordneten Schnittstelle SVGTextContentElement.

SVGTextPathElement.href Schreibgeschützt

Ein SVGAnimatedString, der dem Attribut href oder xlink:href des jeweiligen Elements entspricht.

SVGTextPathElement.side Schreibgeschützt

Eine SVGAnimatedEnumeration, die dem Attribut side des jeweiligen Elements entspricht. Die zulässigen Werte werden durch die in dieser Schnittstelle definierten Konstanten TEXTPATH_SIDETYPE_* festgelegt.

SVGTextPathElement.startOffset Schreibgeschützt

Eine SVGAnimatedLength, die der X-Komponente des Attributs startOffset des jeweiligen Elements entspricht.

SVGTextPathElement.method Schreibgeschützt

Eine SVGAnimatedEnumeration, die dem Attribut method des jeweiligen Elements entspricht. Die zulässigen Werte werden durch die in dieser Schnittstelle definierten Konstanten TEXTPATH_METHODTYPE_* festgelegt.

SVGTextPathElement.spacing Schreibgeschützt

Eine SVGAnimatedEnumeration, die dem Attribut spacing des jeweiligen Elements entspricht. Die zulässigen Werte werden durch die in dieser Schnittstelle definierten Konstanten TEXTPATH_SPACINGTYPE_* festgelegt.

Instanzmethoden

Diese Schnittstelle stellt keine eigenen Methoden bereit, implementiert jedoch die Methoden ihrer übergeordneten Schnittstelle SVGTextContentElement.

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt, wie Sie die Eigenschaften eines SVGTextPathElement setzen und auslesen können.

HTML

Zunächst definieren wir das SVG und das zugehörige CSS, um einen Pfad zu zeichnen, entlang dessen Text dargestellt wird. Dies ist nahezu eine Kopie des SVG im Thema zum Attribut path.

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>

Außerdem fügen wir einen Button hinzu, mit dem die Eigenschaft side umgeschaltet werden kann, um die Seite des Pfads zu ändern, auf der der Text dargestellt wird. Beachten Sie, dass auch ausgeblendeter Protokollierungscode vorhanden ist, der für das Beispiel nicht relevant ist.

<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

Der folgende Code schaltet die Eigenschaft side.baseVal von textPath um, sodass der Text auf die andere Seite des Pfads wechselt.

Zunächst definieren wir eine Funktion, die jede Eigenschaft des Pfadelements protokolliert, und rufen sie beim Laden auf, um den Anfangszustand zu protokollieren. Die Eigenschaft side.baseVale wird zuerst protokolliert und zeigt, wie die Enumerationskonstanten ausgelesen und interpretiert werden können. Dies geschieht in einem try...catch-Block, da side nicht von allen Browsern unterstützt wird. Die übrigen Eigenschaften des Textpfads werden ebenfalls protokolliert, allerdings als Rohwerte ihrer jeweiligen Eigenschaft baseVal.

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();

Der Code des Event-Handlers für den Umschaltbutton ist unten dargestellt. Er liest den aktuellen Wert der Eigenschaft side.baseVal aus und ändert ihn so, dass er der anderen Seite entspricht. Anschließend protokolliert er den aktuellen Zustand.

// 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.");
  }
});

Ergebnis

Klicken Sie auf den Button, um zwischen den Zuständen zu wechseln.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <textPath>