Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
<line>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das <line> SVG Element ist eine grundlegende SVG-Form, die verwendet wird, um eine Linie zu erstellen, die zwei Punkte verbindet.
Nutzungskontext
| Kategorien | Grundformelement, Grafikelement, Formelement |
|---|---|
| Erlaubter Inhalt | Beliebige 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,
body,
svg {
height: 100%;
}
<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
Loading...
Siehe auch
- Andere grundlegende SVG-Formen:
<circle>,<ellipse>,<polygon>,<polyline>,<rect>