SVGTextPathElement: side Eigenschaft
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
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 side schreibgeschützte Eigenschaft der SVGTextPathElement-Schnittstelle gibt die Seite des Pfads an, auf der der Text platziert ist (relativ zur Pfadrichtung).
Die side.baseVal-Eigenschaft spiegelt das side Inhaltsattribut des angegebenen <textPath>-Elements als einen aufgezählten Wert wider.
Während side schreibgeschützt ist, können Sie side.baseVal verwenden, um den Wert des entsprechenden Attributs zu ändern.
In SVG 2 spiegelt side.animVal auch den nicht animierten Wert des Attributs wider.
Wert
Ein SVGAnimatedEnumeration-Objekt.
Die folgenden statischen Eigenschaften geben die Werte an, die von side.baseVal (und side.animVal) zurückgegeben werden können:
SVGTextPathElement.TEXTPATH_SIDETYPE_LEFT(1)-
Der Text wird auf der linken Seite des Pfads gerendert (der Standardwert). Dies entspricht einem Wert von
"left"im SVGside-Attribut. SVGTextPathElement.TEXTPATH_SIDETYPE_RIGHT(2)-
Der Text wird auf der rechten Seite des Pfads gerendert. Dies entspricht einem Wert von
"right"im SVGside-Attribut. SVGTextPathElement.TEXTPATH_SIDETYPE_UNKNOWN(0)-
Der Seitentyp ist unbekannt oder ungültig. Dieser Wert kann nicht gesetzt werden.
Beachten Sie, dass baseVal nicht auf 0 (TEXTPATH_SIDETYPE_UNKNOWN) oder einen anderen als die oben aufgeführten Werte gesetzt werden kann.
animVal ist schreibgeschützt und wirft einen Fehler, wenn Sie versuchen, darauf zu schreiben.
Beispiele
Siehe auch das Beispiel in SVGTextPathElement, das es Ihnen ermöglicht, das side-Attribut umzuschalten.
Zugriff auf die side-Eigenschaft
Dieses Beispiel zeigt, wie Sie die side-Eigenschaft, insbesondere baseVal, setzen und abrufen können.
HTML
Zuerst definieren wir HTML und CSS für einen SVG-Pfad, der Text auf der rechten Seite in unterstützenden Browsern mit dem SVG side-Attribut zeichnet.
<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>
Wir fügen auch einen Button hinzu, um den Wert der side.baseVal-Eigenschaft umzuschalten.
Beachten Sie, dass es auch Protokollierungscode gibt, der ausgeblendet ist, da er nicht relevant ist.
<button id="toggle-side">Toggle Side</button>
JavaScript
Der folgende Code holt zunächst die side.baseVal-Eigenschaft und vergleicht sie mit den aufgezählten statischen Eigenschaftswerten, um zu bestimmen (und zu protokollieren), auf welcher Seite des Pfads der Text gezeichnet wird.
Wenn die side-Eigenschaft nicht definiert ist, wird der Code einen Fehler auslösen, und wir stellen fest, dass die side-Eigenschaft 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 mit den aufgezählten statischen Werten setzen können.
Der Ereignishandler überprüft zunächst den aktuellen Wert von side.baseVal und schaltet dann den Wert auf die statische Eigenschaft um, die der anderen Seite entspricht.
// 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 den Button, um den Text von einer Seite zur anderen zu bewegen.