SVG/Element/line

Das line-Element definiert eine Linie.

Syntax

Start-Tag: notwendig

End-Tag: ggf. notwendig

Elternelemente

Darf vorkommen in:
jedem Element, das fließenden Inhalt erlaubt.

erlaubte Inhalte

animate, animateMotion, animateTransform, set, title (dann wird ein End-Tag nötig)

Attribute

Name	Inhalt	Standardwert	Bedeutung
systemLanguage	IANA		Sprachkürzel
transform	CDATA
x1	NUMBER	0px	horizontaler Startpunkt
y1	NUMBER	0px	vertikaler Startpunkt
x2	NUMBER	Pixelwert	horizontaler Endpunkt
y2	NUMBER	Pixelwert	vertikaler Endpunkt

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel ansehen …

<line class="eins" x1="10" y1="10" x2="200" y2="190" />
<line class="zwei" x1="200" y1="10" x2="200" y2="190" />
<line class="drei" x1="400" y1="10" x2="200" y2="190" />

Statt des bisher verwendeten fill, das bei einer Linie keinen Effekt hat, legen wir hier mit CSS Linienfarbe und -dicke fest.

Beachten Sie: Fehlende Angaben werden als 0 angenommen. Sinnvollerweise muss mindestens eine Angabe gesetzt werden. <line /> ohne Attribute zu verwenden erzeugt einen Punkt (bzw. ein Viertel davon) im Ursprung, sofern stroke-linecap nicht seinen Standardwert butt hat.

Empfehlung: Alternativ können Sie eine Linie mit

• <polyline points="x1,y1 x2,y2"/>
• <path d="Mx1,y1 Lx2,y2"/>

festlegen.

Siehe auch

• SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren#Zeiger
• Datenvisualisierung/Liniendiagramm

Weblinks

• W3C: LineElement