SVG-Linie
Beschreibung des <line>-Elements
Das SVG <line>-Element erstellt gerade Linien. Da <line>-Elemente geometrisch eindimensional sind, haben sie keinen Innenbereich und werden niemals gefüllt. Das fill-Attribut wird für dieses Element ignoriert.
Beispiel für das SVG <line>-Element:
Beispiel für das SVG <line>-Element
<!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>Erklärung des obigen Codes:
- Das
x1-Attribut gibt die startende x-Koordinate an. - Das
y1-Attribut gibt die startende y-Koordinate an. - Das
x2-Attribut gibt die endende x-Koordinate an. - Das
y2-Attribut gibt die endende y-Koordinate an.
Standardmäßig werden Linien mit einem schwarzen Strich und einer Strichbreite von 1 Pixel gezeichnet. Diese können Sie mit den Attributen stroke und stroke-width nach Ihren Wünschen anpassen, wie im Beispiel gezeigt.
SVG <line> vs SVG <path>
Die SVG-Elemente <line> und <path> zeichnen beide Linien, erfüllen jedoch unterschiedliche Zwecke. Das <line>-Element ist speziell für einfache, gerade Linien konzipiert und für diese Aufgabe semantisch und effizienter. Das <path>-Element wird verwendet, um komplexe Formen oder mehrere verbundene Linien und Kurven zu definieren. Während <path> gerade Linien zeichnen kann, ist es im Allgemeinen besser, <line> für einfache gerade Segmente zu verwenden und <path> für komplexere Zeichnungen zu reservieren.
Das SVG <line>-Element unterstützt auch die Globalen Attribute und Ereignisattribute.
Practice
Welche SVG-Attribute sind für das Erstellen einer Linie in HTML erforderlich?