<line>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Das <line>
-Element ist eine Grundform in SVG, die verwendet wird, um eine Linie zu erstellen, die zwei Punkte verbindet.
Beispiel
<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>
Attribute
x1
-
Definiert die x-Achsen-Koordinate des Startpunkts der Linie. Wertetyp: <length>|<percentage>|<number> ; Standardwert:
0
; Animierbar: ja x2
-
Definiert die x-Achsen-Koordinate des Endpunkts der Linie. Wertetyp: <length>|<percentage>|<number> ; Standardwert:
0
; Animierbar: ja y1
-
Definiert die y-Achsen-Koordinate des Startpunkts der Linie. Wertetyp: <length>|<percentage>|<number> ; Standardwert:
0
; Animierbar: ja y2
-
Definiert die y-Achsen-Koordinate des Endpunkts der Linie. Wertetyp: <length>|<percentage>|<number> ; Standardwert:
0
; Animierbar: ja pathLength
-
Definiert die Gesamtlänge des Pfades in Benutzereinheiten. Wertetyp: <number> ; Standardwert: none; Animierbar: ja
Verwendungskontext
Kategorien | Grundformelement, Grafikelement, Formelement |
---|---|
Erlaubter Inhalt | Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente |
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # LineElement |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Andere SVG-Grundformen:
<circle>
,<ellipse>
,<polygon>
,<polyline>
,<rect>