SVG ist besser als Canvas

[j4nk3y]

So.

<svg id="style_top" width="100%" height="6em" viewBox="0 0 1218 77">
		<title>Test</title>
		<polyline points="250,0 250,20 968,20 968,0 250,0" stroke-width="1" stroke="rgba(250,180,150,0.75)" fill="rgba(250,180,150,0.45)" />
	</svg>

#style_top
{
	position: absolute;
	height: 6em;
	width: 100%;
	margin: 0em;
	padding: 0em;
	z-index: 5;
}

2. Bis zu einer gewissen Breite wird das Quadrat (wird später umfangreicher daher kein rect) am oberen Rand dargestellt. Logisch wegen den x Koordinaten 250,0 und 968,0. Aber wenn das Fenster verkleinert wird rutscht die Null Koordinate nach unten obwohl der Container seine Größe nicht ändert. Kann man das beheben?

Erst dachte ich das ich vielleicht mit #style_top > polyline {position: absolute; top: 0em;} etwas erreichen könnte, dem war leider nicht so, nach kurzer recherche dann: preserveAspectRatio="xMinYMin" gefunden. In dem Wiki steht dann noch etwas von "meetOrSlice", was bedeutet das?

Gruß
Jo