path

Das path-Attribut hat zwei unterschiedliche Bedeutungen: Es kann entweder einen Textpfad definieren, entlang dessen die Zeichen eines Textes gerendert werden, oder einen Bewegungspfad, entlang dessen ein referenziertes Element animiert wird.

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

Beispiel

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

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    id="MyPath"
    fill="none"
    stroke="silver"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />

  <text>
    <textPath
      path="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

animateMotion

Für <animateMotion> definiert path den Bewegungspfad, ausgedrückt im gleichen Format und interpretiert auf die gleiche Weise wie die geometrische Eigenschaft d für das <path>-Element. Der Effekt einer Bewegungspfad-Animation ist eine Translation entlang der x- und y-Achsen des aktuellen Benutzerskoordinatensystems durch die im Laufe der Zeit berechneten x- und y-Werte.

Wert	`<path-data>`
Standardwert	Keiner
Animierbar	Nein

<path-data>: Dieser Wert definiert den Bewegungspfad, entlang dessen das referenzierte Element animiert wird. Für detaillierte Informationen über die verwendbaren Befehle lesen Sie die Erklärung zum d-Attribut.

textPath

Für <textPath> definiert path den Pfad, auf den die Glyphen eines <text>-Elements gerendert werden. Ein leerer String zeigt an, dass keine Pfaddaten für das Element vorhanden sind. Das bedeutet, dass der Text innerhalb des <textPath>-Elements nicht gerendert wird oder zur Begrenzungsbox des <text>-Elements beiträgt. Wenn das Attribut nicht angegeben ist, wird stattdessen der Pfad aus href verwendet.

Wert	`<path-data>`
Standardwert	Pfad, der in `href` angegeben ist
Animierbar	Ja

<path-data>: Dieser Wert definiert den Textpfad, entlang dessen die Glyphen des <text>-Elements ausgerichtet werden. Für detaillierte Informationen über die verwendbaren Befehle lesen Sie die Erklärung zum d-Attribut.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # TextPathElementPathAttribute
SVG Animations Level 2 # AnimateMotionElementPathAttribute