W3docs
de
Anmelden

SVG Line

Das SVG <line>-Element erklärt: Linie mit x1/y1/x2/y2 zeichnen, mit stroke gestalten, Striche und Pfeilspitzen hinzufügen und mit <path> vergleichen.

Beschreibung des <line>-Elements

Das SVG-Element <line> zeichnet eine einzelne gerade Linie zwischen zwei Punkten: einem Startpunkt (x1, y1) und einem Endpunkt (x2, y2). Verwenden Sie es immer dann, wenn Sie eine einfache Linie, Achse, Verbindung oder Trennlinie innerhalb eines <svg> benötigen — es ist die einfachste und lesbarste Möglichkeit, „eine Linie von A nach B" auszudrücken.

Alle vier Koordinatenattribute haben den Standardwert 0 und akzeptieren entweder Längenangaben (Benutzereinheiten wie 30 oder 30px) oder Prozentangaben relativ zum viewport (wie 50%). Ein <line>-Element ohne Attribute ist daher eine Linie der Länge null am Ursprung, die nichts darstellt.

Da ein <line>-Element geometrisch eindimensional ist, hat es keinen inneren Bereich. SVG füllt das Innere einer Form mit der fill-Farbe und zeichnet den Umriss mit der stroke-Farbe — eine Linie hat jedoch kein Inneres. Aus diesem Grund wird das fill-Attribut ignoriert, und eine Linie ist unsichtbar, bis Sie ihr einen stroke zuweisen.

Beispiel des SVG-<line>-Elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="310" width="400">
      <line x1="50" y1="30" x2="300" y2="300" style="stroke:rgb(8, 112, 177);stroke-width:3" />
    </svg>
  </body>
</html>
Probier es selbst »

Erklärung des obigen Codes:

  • Das Attribut x1 gibt die x-Koordinate des Startpunkts an.
  • Das Attribut y1 gibt die y-Koordinate des Startpunkts an.
  • Das Attribut x2 gibt die x-Koordinate des Endpunkts an.
  • Das Attribut y2 gibt die y-Koordinate des Endpunkts an.

Standardmäßig werden Linien mit einem schwarzen Strich und einer Strichbreite von 1 Pixel gezeichnet. Sie können diese Einstellungen mit den Attributen stroke und stroke-width anpassen, wie im Beispiel gezeigt.

Linien gestalten: Striche, Enden und Pfeilspitzen

Das Erscheinungsbild einer Linie wird ausschließlich durch strichbezogene Eigenschaften gesteuert. Das folgende Beispiel zeichnet drei Linien mit unterschiedlicher Gestaltung:

  • stroke-dasharray wandelt eine durchgezogene Linie in eine gestrichelte oder gepunktete um. Der Wert ist eine Liste aus Strich- und Lückenlängen (8 4 bedeutet ein 8-Einheiten-Strich gefolgt von einer 4-Einheiten-Lücke, die sich wiederholt).
  • stroke-linecap bestimmt die Form der Linienenden — butt (Standard, flach), round oder square.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="160" width="320">
      <!-- Solid line -->
      <line x1="20" y1="30" x2="300" y2="30"
            stroke="rgb(8, 112, 177)" stroke-width="4" />
      <!-- Dashed line -->
      <line x1="20" y1="80" x2="300" y2="80"
            stroke="rgb(8, 112, 177)" stroke-width="4"
            stroke-dasharray="12 6" />
      <!-- Rounded dotted line -->
      <line x1="20" y1="130" x2="300" y2="130"
            stroke="rgb(8, 112, 177)" stroke-width="8"
            stroke-linecap="round" stroke-dasharray="0.1 20" />
    </svg>
  </body>
</html>

Zwei weitere Eigenschaften sind bei Linien nützlich:

  • marker-end hängt einen wiederverwendbaren <marker> (definiert in <defs>) an das Ende der Linie — die Standardmethode, um eine Pfeilspitze hinzuzufügen.
  • vector-effect="non-scaling-stroke" hält die Strichbreite auch beim Skalieren des SVG konstant, sodass eine haarfeine Linie unabhängig vom Zoomgrad haarfein bleibt.

SVG <line> vs. SVG <path>

Die SVG-Elemente <line> und <path> zeichnen beide Linien, dienen jedoch unterschiedlichen Zwecken. Das <line>-Element ist speziell für einfache, gerade Linien konzipiert und für diese Aufgabe semantisch klarer und effizienter. Das <path>-Element wird verwendet, um komplexe Formen oder mehrere verbundene Linien und Kurven zu definieren. Obwohl <path> gerade Linien zeichnen kann, ist es im Allgemeinen besser, <line> für einfache gerade Abschnitte zu verwenden und <path> für komplexere Zeichnungen zu reservieren.

Dieselbe gerade Linie kann auf beide Weisen ausgedrückt werden. Das <line>-Element aus dem ersten Beispiel entspricht einem <path>, der zum Startpunkt springt (M50,30) und eine Linie zum Endpunkt zeichnet (L300,300):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="310" width="400">
      <!-- These two draw the same line -->
      <line x1="50" y1="30" x2="300" y2="300"
            stroke="rgb(8, 112, 177)" stroke-width="3" />
      <path d="M50,30 L300,300"
            stroke="rgb(255, 159, 0)" stroke-width="3" />
    </svg>
  </body>
</html>

Die <path>-Variante ist für ein einzelnes Segment ausführlicher, was genau der Grund für die Existenz von <line> ist. Wenn Sie mehrere gerade Abschnitte aneinanderreihen müssen, verwenden Sie <polyline> anstatt viele <line>-Elemente zu stapeln.

Das SVG-Element <line> unterstützt außerdem die Globalen Attribute und Ereignisattribute.

Übung

Übung
Welche Attributmenge definiert die zwei Endpunkte einer SVG-Linie?
Welche Attributmenge definiert die zwei Endpunkte einer SVG-Linie?
Was this page helpful?