SVGTextPathElement: Eigenschaft side
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Die schreibgeschützte Eigenschaft side der Schnittstelle SVGTextPathElement gibt an, auf welcher Seite des Pfads der Text platziert wird (relativ zur Pfadrichtung).
Die Eigenschaft side.baseVal spiegelt das Inhaltsattribut side des betreffenden <textPath>-Elements als Aufzählungswert wider.
Obwohl side schreibgeschützt ist, können Sie mit side.baseVal den Wert des entsprechenden Attributs ändern.
In SVG 2 spiegelt side.animVal ebenfalls den nicht animierten Wert des Attributs wider.
Wert
Ein SVGAnimatedEnumeration-Objekt.
Die folgenden statischen Eigenschaften geben die Werte an, die side.baseVal (und side.animVal) zurückgeben können:
SVGTextPathElement.TEXTPATH_SIDETYPE_LEFT(1)-
Der Text wird auf der linken Seite des Pfads gerendert (Standardeinstellung). Dies entspricht dem Wert
"left"des SVG-Attributsside. SVGTextPathElement.TEXTPATH_SIDETYPE_RIGHT(2)-
Der Text wird auf der rechten Seite des Pfads gerendert. Dies entspricht dem Wert
"right"des SVG-Attributsside. SVGTextPathElement.TEXTPATH_SIDETYPE_UNKNOWN(0)-
Die Seite ist unbekannt oder ungültig. Dieser Wert kann nicht gesetzt werden.
Beachten Sie, dass baseVal weder auf 0 (TEXTPATH_SIDETYPE_UNKNOWN) noch auf einen anderen als die oben aufgeführten Werte gesetzt werden kann.
animVal ist schreibgeschützt; ein Schreibversuch löst eine Ausnahme aus.
Beispiele
Siehe auch das Beispiel zu SVGTextPathElement, in dem Sie das Attribut side umschalten können.
Auf die Eigenschaft side zugreifen
Dieses Beispiel zeigt, wie Sie die Eigenschaft side und insbesondere ihren Wert baseVal auslesen und setzen können.
HTML
Zunächst definieren wir HTML und CSS für einen SVG-Pfad, auf dessen rechter Seite der Text in unterstützenden Browsern mithilfe des SVG-Attributs side gezeichnet wird.
<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 " />
<text>
<textPath href="#MyPath" side="right">This text follows a path.</textPath>
</text>
</svg>
Außerdem fügen wir eine Schaltfläche hinzu, mit der sich der Wert der Eigenschaft side.baseVal umschalten lässt.
Der Code enthält auch eine Protokollierung, die ausgeblendet ist, da sie hier nicht relevant ist.
<button id="toggle-side">Toggle Side</button>
JavaScript
Der folgende Code liest zunächst die Eigenschaft side.baseVal aus und vergleicht sie mit den statischen Aufzählungswerten, um festzustellen (und zu protokollieren), auf welcher Seite des Pfads der Text gezeichnet wird.
Wenn die Eigenschaft side nicht definiert ist, löst der Code eine Ausnahme aus. In diesem Fall halten wir fest, dass side nicht unterstützt wird.
const textPath = document.querySelector("textPath");
const button = document.querySelector("#toggle-side");
// Helper function to read and log the current side
function logCurrentSide() {
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 the initial state on load
logCurrentSide();
Der folgende Code zeigt, wie Sie side.baseVal auf einen der statischen Aufzählungswerte setzen können.
Der Event-Handler prüft zunächst den aktuellen Wert von side.baseVal und schaltet ihn dann auf die statische Eigenschaft für die jeweils andere Seite um.
// Toggle the side when the button is clicked
button.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
logCurrentSide();
} catch (e) {
log("Setting the side property is not supported in this browser.");
}
});
Ergebnis
Klicken Sie auf die Schaltfläche, um den Text von einer Seite auf die andere zu verschieben.