<line>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <line> SVG Element ist eine grundlegende SVG-Form, die verwendet wird, um eine Linie zu erstellen, die zwei Punkte verbindet.

Nutzungskontext

KategorienGrundformelement, Grafikelement, Formelement
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
Animationselemente
Beschreibende Elemente

Attribute

x1

Definiert die x-Achsen-Koordinate des Linienanfangspunkts. Werttyp: <length> | <percentage> | <number>; Standardwert: 0; Animierbar: ja

x2

Definiert die x-Achsen-Koordinate des Linienendpunkts. Werttyp: <length> | <percentage> | <number>; Standardwert: 0; Animierbar: ja

y1

Definiert die y-Achsen-Koordinate des Linienanfangspunkts. Werttyp: <length> | <percentage> | <number>; Standardwert: 0; Animierbar: ja

y2

Definiert die y-Achsen-Koordinate des Linienendpunkts. Werttyp: <length> | <percentage> | <number>; Standardwert: 0; Animierbar: ja

pathLength

Definiert die gesamte Pfadlänge in Benutzereinheiten. Werttyp: <number>; Standardwert: keiner; Animierbar: ja

DOM-Schnittstelle

Dieses Element implementiert die SVGLineElement Schnittstelle.

Beispiel

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />

  <!-- If you do not specify the stroke
       color the line will not be visible -->
</svg>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# LineElement

Browser-Kompatibilität

Siehe auch