CSS, HTML & Javascript mit {stil}

SVG path: Linien, Kurven, Bögen

Das path-Element erzeugt Linien, ist aber flexibler und komplexer als einfache Linien mit line, polyline oder polygon. path zeichnet nicht nur gerade Linien, sondern auch Kurven – wie die Zeichenfeder in Photoshop oder Illustrator.

SVG Linien von Punkt zu Punkt, Bezierkurve

path – Flexible Form aus Linien

SVG path zeichnet Linien zwischen zwei und mehr Punkten und kann den Pfad automatisch zwischen dem ersten und letzten Punkt schließen. Die Punkte werden im Attribut d durch ihre Positionen x/y angegeben.

path

Einfacher Pfad zwischen drei Punkten 
<path
     ┌-- Move to Point
     │
     │        ┌-- Line to
     │        │
     │        │     close path --┐
     ▼        ▼                  ▼
  d="M 100,10 L 200,60 L 100,130 Z" 
     fill="green"
     stroke="gray" />

Das d-Attribut bestimmt den Verlauf des Pfads und variiert je nach Art des Pfads:

  • Mit einem großen L sind x y absolute Werte wie bei polyline und polygon, also von Punkt x1y1 nach Punkt x2 y2, mit einem kleinen l relativ zum aktuellen Punkt.
  • Ein Z am Ende der Koordinatenliste schließt den Pfad zu einer Form.

Optionen des d-Attributs

M, m move to pointgehe zum nächsten Punkt x / y, egal ob großes oder kleines L
Z, z close path Pfad schließen
L, l line to gerade Linie mit großem L gehe x / y Einheiten, mit kleinem L gehe zu absolutem Punkt x y
C, c und S, s Cubic Bézierkurve
Q, q und T, t Quadratische Bézierkurve
S,s smooth cubic curve to
A, a Elliptical ArcKreisbogen oder elliptischer Bogen

Großbuchstaben bestimmen eine absolute Angabe wie im Beispiel oben:
(100,10 L 200,60): Gehe von Punkt (100,10) zum Punkt (200,60).

Kleinbuchstaben führen zu relativen Positionsangaben im Bezug zum vorangehenden Punkt:
(100,10 l 100,50): Gehe von Punkt (100,10) um 100 Einheiten in x-Richtung und um 50 Einheiten in y-Richtung.

stroke-dasharray und stroke-dashoffset: Linien gestrichelt

path mit Unterbrechungen geht auch.

<path d="m0 20h50m50 0h50m50 0h50m50 0h50m50 0h50m50 0h50" stroke="cyan" stroke-width="10" fill="none"/>

Das erzeugt einen Pfad aus sechs Teilstücken mit Unterbrechungen. Gestrichtelte Linien sind allerdings einfacher durch die SVG-Attribute stroke-dasharray und stroke-dashoffset zu realisieren.

<path d="m0 10h600" stroke="cyan" stroke-dasharray="50,5" stroke-width="10" stroke-dashoffset="25" />

Der erste Wert von stroke-dasharray="50,5" bestimmt die Länge des durchgehenden Teilstücks (50), der zweite (5) die Breite der Lücken.

stroke-dashoffset liegt zwischen 0 und dem ersten Wert von stroke-dasharray und legt den Anfang der ersten Teillinie fest.

Gepunktete Linien

Mit stroke-linecap und stroke-dasharray haben wir die Zutaten für eine gepunktete Linie beisammen.

<line x1="10" x2="590" y1="15" y2="15" 
      stroke="cyan" 
      stroke-width="6" 
      stroke-linecap="round" 
      stroke-dasharray="1,10" />

stroke-linecap, stroke-linejoin – Ecken und Enden von SVG-Pfaden

Die Darstellung der beiden Enden eines offenen Pfads und die Verbindung von Teilpfaden wird durch die Attribute stroke-linecap und stoke-linejoin festgelegt.

<path   d="m28 115 188-90 188 90" fill="none" stroke="red" stroke-width="30"/>

Suchen auf mediaevent.de