side
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das side Attribut bestimmt die Seite eines Pfades, auf der der Text platziert wird (relativ zur Pfadrichtung).
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
Beispiel
Grundlegende Verwendung
Das folgende Beispiel zeichnet zwei kreisförmige Textpfade und zeigt den Text auf der linken und der rechten Seite an.
HTML
html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
<text>
<textPath href="#circle1" side="left">Text on left of path</textPath>
</text>
<text>
<textPath href="#circle2" side="right">Text on right of path</textPath>
</text>
<circle
id="circle1"
cx="100"
cy="100"
r="70"
fill="transparent"
stroke="silver" />
<circle
id="circle2"
cx="320"
cy="100"
r="70"
fill="transparent"
stroke="silver" />
</svg>
Ergebnis
Browser, die die Einstellung des side Attributs unterstützen, werden den Text links (außen) und rechts (innen) des kreisförmigen Textpfades unten anzeigen.
Verwendungshinweise
| Wert | left | right |
|---|---|
| Standardwert | left |
| Animierbar | Ja |
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # TextPathElementSideAttribute |