SVG-Pfad<path>

In SVG wird das<path>Element wird verwendet, um Pfade zu erstellen, und es ist eine der leistungsstärksten und flexibelsten Grundformen in SVG.

Verwendung<path>Das Element kann verschiedene komplexe Formen wie Linien, Kurven, Bögen usw. zeichnen, und die Form und der Stil des Pfades können durch Festlegen von Pfadbefehlen gesteuert werden.

Grundlegende Syntax

<path
  d="path-data"            <!-- 定义路径的路径数据 -->
  fill="fill-color"        <!-- 路径的填充颜色 -->
  stroke="stroke-color"    <!-- 路径的描边颜色 -->
  stroke-width="width"     <!-- 路径的描边宽度 -->
/>

Attributerklärung:

  • dDas Attribut definiert die Pfaddaten, d. h. die Abfolge der Pfadbefehle. Pfaddaten bestehen aus einer Reihe von Pfadbefehlen; jeder Befehl beginnt mit einem Buchstaben, gefolgt von einer Reihe numerischer Parameter. Übliche Pfadbefehle sind: M (Bewegung zu), L (Linie zu), H (horizontale Linie zu), V (vertikale Linie zu), C (kubische Bézier-Kurve), S (glatte Kurve), Q (quadratische Bézier-Kurve), T (glatte quadratische Bézier-Kurve), A (Bogen), Z (Pfad schließen) usw.

  • fillDas Attribut definiert die Füllfarbe des Pfades.

  • strokeDas Attribut definiert die Strichfarbe des Pfades.

  • stroke-widthDas Attribut definiert die Strichbreite des Pfades.

Der folgende Code zeichnet einen Pfad mit oranger Füllung, schwarzem Strich und einer Breite von 2 Pixeln. Seine Pfaddaten sind: Bewegen zu (50, 50), dann der Reihe nach Verbinden mit (150, 50) und (100, 150), und schließlich den Pfad schließen.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 50 L 150 50 L 100 150 Z" fill="orange" stroke="black" stroke-width="2" />
</svg>

Beispiel 1

Das folgende Beispiel definiert einen Pfad, der an Position 150 0 beginnt, Position 75 200 erreicht, dann von dort zu 225 200 geht und schließlich den Pfad bei 150 0 schließt.

Unten ist der SVG-Code:

Beispiel

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L75 200 L225 200 Z" /> </svg>

Selbst ausprobieren »

Zum Anzeigen klicken:。

Beispiel 2

Das folgende Beispiel erstellt eine quadratische Bézier-Kurve, wobei A und C der Start- bzw. Endpunkt sind und B der Kontrollpunkt ist:

Unten ist der SVG-Code:

Beispiel

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" /> <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" /> <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" /> <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" /> <!-- Relevante Punkte markieren --> <g stroke="black" stroke-width="3" fill="black"> <circle id="pointA" cx="100" cy="350" r="3" /> <circle id="pointB" cx="250" cy="50" r="3" /> <circle id="pointC" cx="400" cy="350" r="3" /> </g> <!-- Die Punkte beschriften --> <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="350" dx="-30">A</text> <text x="250" y="50" dy="-10">B</text> <text x="400" y="350" dx="30">C</text> </g> </svg>

Selbst ausprobieren »

Zum Anzeigen klicken:。

Hinweise

  • <path>Die Pfaddaten des Elements sind der komplexeste Teil von SVG und erfordern ein gewisses Maß an Lernen und Übung, um die Verwendung der verschiedenen Pfadbefehle zu beherrschen.

  • Pfaddaten können mehrere Pfadbefehle enthalten, und jeder Pfadbefehl kann unterschiedliche Parameter haben, um die Form und Richtung des Pfads zu steuern.

Indem Sie<path>des Elements können Sie verschiedene komplexe Formen und Pfade in SVG zeichnen und das Aussehen und den Stil des Pfads durch Festlegen von Attributen steuern.

Weitere Erweiterungen