side

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell:Dies ist eineexperimentelle Technologie
Überprüfen Sie dieBrowser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Dasside Attribut bestimmt die Seite eines Pfades, auf der der Text platziert wird (relativ zur Richtung des Pfades).

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

<textPath>

Beispiel

html,body,svg {  height: 100%;}text {  font:    25px "Helvetica",    "Arial",    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       cx="100"    cy="100"    r="70"    fill="transparent"    stroke="silver" />  <circle       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 Pfades (relativ zur Richtung des Pfades).
right: Dieser Wert platziert den Text auf der rechten Seite des Pfades (relativ zur Richtung des Pfades). Dies kehrt die Pfadrichtung effektiv um.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # TextPathElementSideAttribute

Browser-Kompatibilität

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.