side

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, auf welcher Seite eines Pfads der Text platziert wird (relativ zur Pfadrichtung).

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

<textPath>

Beispiel

html,
body,
svg {
  height: 100%;
}

text {
  font:
    25px Arial,
    Helvetica,
    sans-serif;
}

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <text>
    <textPath href="#circle1" side="left">Text left from the path</textPath>
  </text>
  <text>
    <textPath href="#circle2" side="right">Text right from the 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>

Verwendungshinweise

Wert	`left` \| `right`
Standardwert	`left`
Animierbar	Ja

left: Dieser Wert platziert den Text auf der linken Seite des Pfads (relativ zur Pfadrichtung).
right: Dieser Wert platziert den Text auf der rechten Seite des Pfads (relativ zur Pfadrichtung). Dies kehrt die Pfadrichtung effektiv um.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # TextPathElementSideAttribute

Browser-Kompatibilität

BCD tables only load in the browser